Вы здесь: Главная > Создание сайта > Как сделать дизайн сайта WordPress на основе шаблона Twenty Eleven?

Как сделать дизайн сайта WordPress на основе шаблона Twenty Eleven?

Опубликовано автором Просмотры: 36

Как сделать хороший дизайн сайта в тему проекта? Нужно установить и отредактировать готовый шаблон.

На прошлых занятиях мы с вами установили на сайт шаблон Twenty Eleven и сделали некоторые настройки. Теперь на основе этого шаблона мы сделаем новый дизайн.

Сайт на основе шаблона Twenty Eleven выглядит примерно так…

сделать сайт на вордпресс новичку

Пришла пора поколдовать над дизайном. Эта статья научит вас менять оформление основных элементов сайта и создавать целостную композицию, отвечающую теме проекта.

    Содержание

  1. Как изменить название и описание сайта?
  2. Как установить фавикон на WordPress?
  3. Как изменить цвет заголовков, ссылок и фона сайта?
  4. Как организовать вывод основного контента?
  5. Как изменить изображение в шапке шаблона Twenty Eleven?
  6. Как назначить в качестве фона изображение?
  7. Как изменить цвет верхнего меню?
  8. Как изменить фон внутреннего содержимого блога?
  9. Как убрать ссылку в футере шаблона Twenty Eleven?
  10. Как добавить в подвал дополнительное меню?
  11. Как удалить форму поиска в шапке шаблона Twenty Eleven?
  12. Как закоментировать код?
  13. Как убрать верхнее меню под шапкой?
  14. Как добавить сайдбар в шаблон Twenty Eleven?
  15. Как вывести на главной странице слайдер с избранными статьями?
  16. Как удалить дату публикации записи?
  17. Как удалить «Запись опубликована автором…»?
  18. Как удалить «Рубрика: … | Добавить комментарий»?
  19. Как удалить форму комментариев?
  20. Как уменьшить форму комментариев?
  21. Как добавить жирности тексту меню?
  22. Как удалить лишнее пространство у заголовка?
  23. Как удалить лишнее пространство между меню и заголовком статьи?
  24. Как добавить к дате поста время?

Напоминаю, что все изображения кликабельны — по клику они увеличиваются.

И настоятельно рекомендую: прежде чем приступить к редактированию файлов шаблона, обязательно сохраняйте их резервные копии. Самый простой способ: просто скопировать содержимое файла в текстовый документ. Тогда, если вы что-то случайно испортите, сможете вернуться к первоначальному варианту.

Как изменить название и описание сайта?

Нажмите в меню «Внешний вид» — «Настроить».
Выберите «Свойства сайта».

как зменить название и описание сайта

В появившемся окошке напишите название сайта и его краткое описание.

как сменить название и описание сайта на вордпресс

Если вы отметите галочкой опцию «Отображать текст заголовка», то эти данные будут выводиться в шапке сайта над основным изображением.

Если вы не отметите эту опцию, то на самом верху страницы сразу появится изображение, как на этом сайте.

Здесь же можно загрузить иконку сайта – фавикон. Эта маленькая картиночка 16 на 16 пикселей работает на имидж сайта. В выдаче Яндекса фавикон появится рядом с заголовком вашего сайта и сможет привлечь внимание блуждающих по Интернету путников. В браузере пользователя он появится рядом с названием страницы в текущей вкладке. Он поможет быстрее найти ваш сайт в Истории браузера и в закладках. В общем, на сайт непременно нужно установить понятный, яркий и запоминающийся фавикон.

Как установить фавикон на WordPress?

Есть два способа.

Первый способ. В меню «Внешний вид» — «Настроить» — «Свойства сайта» в разделе «Иконка сайта» нажмите «Выберите файл».

Загрузите на сайт квадратную картинку со стороной не менее 512 пикселей. Движок сам преобразует картинку в фавикон.

Другой способ заключается в установке плагина Easy Icon. Установите, активируйте, перейдите в меню «Внешний вид» — «Easy Icon».

Пролистайте страницу до конца, выберите и загрузите приготовленный файл с компьютера.

Чаще всего картинка для фавикона носит название favicon.ico. Также используют картинку в формате .png размером 16 на 16 пикселей. Можно скачать готовый фавикон из Интернета или воспользоваться каким-нибудь онлайн-сервисом по изготовлению фавикона из понравившейся картинки.

фавикон для вордпресс

Как изменить цвет заголовков, ссылок и фона сайта?

Нажмите в меню «Внешний вид» — «Настроить» — «Цвета».
Здесь можно выбрать цветовую схему: темную или светлую.
А также можно назначить цвет заголовков, фона и ссылок.

Как изменить цвет заголовков, ссылок и фона сайта?

как изменить цвет заголовков и фона сайта

Какой цвет вписать? Загляните в «Таблицу безопасных цветов». Все представленные там цвета правильно отображаются во всех браузерах. Рядом с каждым цветом вы найдете его код RGB (код для графического редактора) и HEX (обозначение цвета в HTML).

Как организовать вывод основного контента?

Нажмите в меню «Внешний вид» — «Настроить» — «Разметка».

Здесь можно назначить вывод содержимого (контента) слева от сайдбара, справа или в одну колонку.

Как изменить изображение в шапке шаблона Twenty Eleven?

Нажмите в меню «Внешний вид» — «Настроить».

Выберите «Изображение заголовка».

как изменить изображение в шапке шаблона Twenty Eleven

Появится форма для добавления изображения. Вам нужно подготовить заранее изображение 1000 × 288 пикселей.

Можно загрузить картинку побольше и обрезать. А можно в Яндекс Картинках задать поиск изображений с заданным размером, а потом скачанную картинку отредактировать в онлайн фотошопе.

61

Нажмите «Добавить»

как поменять изображение в шапке шаблона твенти элевен

Загрузите картинку и выполните команды «Выбрать и обрезать» и «Обрезать».

Не забудьте нажать «Сохранить и опубликовать».

как изменить изображение в шаблоне Twenty Eleven

Как назначить в качестве фона изображение?

Нажмите в меню «Внешний вид» — «Настроить» — «Фоновое изображение».
Выберите изображение.

как сменить фон в шаблоне Twenty Eleven

Загрузив изображение, выберите, каким способом будет повторяться фон и сохраните изменения.

как задать фоновое изображение в шаблоне Twenty Eleven

Как изменить цвет главного верхнего меню в теме Twenty Eleven?

Выберите в меню «Внешний вид» — «Редактор».

По умолчанию в редакторе открывается файл Таблица стилей style.css.

В нем нужно найти раздел, который отвечает за меню – раздел с заголовком /* =Menu.

Посмотрите на участок кода, который я выделила синим цветом на фото ниже.

Как изменить цвет верхнего меню в Twenty Eleven

В коде использовано два цвета, оба повторяются по четыре раза. Замените каждый цвет другим 4 раза.

Если вы измените только один цвет, у вас появится градиент — плавный такой переход между черным и вашим цветом. В зависимости от того, какой цвет вы поменяете, градиент будет черным вверху или внизу.

Если вы измените оба цвета, скажем, назначите синий и голубой, то получите плавный переход между двумя оттенками. Воспользуйтесь таблицей безопасных цветов, чтобы узнать код нужного вам цвета.

Если вы хотите узнать код цвета какой-то точки на экране, можете воспользоваться программой Pixie. Так вы сможете создать меню в той же гамме, что и шапка сайта. Просто выберите самую темную и самую светлую точку в изображении заголовка и пропишите их коды.

Я изменила сразу 2 цвета

как изменить цвет меню в шаблоне Twenty Eleven

Не забудьте нажать кнопку «Обновить файл».

Как изменить фон внутреннего содержимого блога?

Если вы хотите сменить цвет фона для всего содержимого блога (фон основной колонки, бокового сайдбара, футера, виджетов), то нужно открыть файл style.css и в строке выделенной на фото ниже в другом разделе изменить цвет.

как изменить фон основной колонки, сайдбара и виджетов

Как убрать ссылку в футере темы Twenty Eleven?

Найдите в меню «Внешний вид» — «Редактор». Откройте файл footer.php.

как удалить ссылку в футере шаблона Twenty Eleven

На рисунке выделен код, который выводит строчку «Сайт работает на WordPress» и соответствующую ссылку.

как удалить ссылку из футера шаблона Twenty Eleven

Удалите или измените строчку:

<a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>

Так же вы можете вставить в этом месте код счетчиков или надпись, повествующую о том, что все права на вашем сайте защищены.

Как добавить в подвал дополнительное меню?

На месте удаленной в футере шаблона ссылки вы можете расположить небольшое меню. Вместо удаленного фрагмента кода, описанного в прошлом пункте, вы можете поместить несколько ссылок.

Выглядеть фрагмент кода меню будет примерно так:

<center><a href=«http://sait.ru/»>Главная</a>|<a href=«http://sait.ru/vse-stati/»>Карта блога</a>|<a href=«http://sait.ru/o-sajte/»>О сайте</a></center>

Как удалить форму поиска в шапке шаблона Twenty Eleven?

Выберите в меню «Внешний вид» — «Редактор».

Откройте файл header.php.

Найдите этот код и удалите его, либо закомментируйте:

<?php
 // Has the text been hidden?
 if ( 'blank' == get_header_textcolor() ) :
 ?>
 <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
 <?php get_search_form(); ?>
 </div>
 <?php
 else :
 ?>
 <?php get_search_form(); ?>
 <?php endif; ?>

Как закоментировать код?

Иногда лучше не удалять код, а просто его  закомментировать. Для этого нужно с двух стороно от кода прописать символы вот таких стрелочек. (Вместо слова «код» будет ваш отрывок кода)

<!-- код -->

Как убрать верхнее меню под шапкой?

Создайте пустое меню без добавления страниц.

Как добавить сайдбар в шаблон Twenty Eleven?

У шаблона Twenty Eleven есть один недостаток – отсутствие сайдбара на страницах записи. Как же добавить боковую колонку к статьям?

Выберите в меню «Внешний вид» — «Редактор».
Найдите в правой колонке файл single.php («одна запись») и откройте его на редактирование.

как добавить сайдбар в шаблон Twenty Eleven

Найдите строчку:

	

<?php get_footer(); ?>

Прямо перед ней добавьте код:

<?php get_sidebar(); ?>

Сохраните изменения.

Теперь нужно добавить стили для сайдбара, который будет выводиться на странице записей.

как добавить сайдбар в Twenty Eleven

Откройте в редакторе файл style.css и просто вставьте в самый конец документа код:

.singular    #primary {margin: 0 -26.4% 0 0;}
 
#nav-single {display: none;}
 
.singular .entry-header .entry-meta {position: relative;}
 
.singular .hentry {padding: 0;}
 
.singular .entry-header, .singular .entry-content, .singular footer.entry-meta, .singular #comments-title {width: 100%;}
 
.singular #content, .left-sidebar.singular #content {margin: 0 34% 0 7.6%;}
 
.singular article .entry-title {padding-top: 0;}
 
.singular .entry-meta .edit-link a {right: 0;top: 0;left: auto;}

Как вывести на главной странице слайдер с избранными статьями?

Вы можете в настройках отдельной страницы «Атрибуты страницы» — «Шаблон» отметить опцию «Шаблон избранного». Тогда на данной странице после основного текста появится слайдер с избранными статьями.

75

Такую особенную страницу можно сделать главной страницей сайта. Сайдбар на ней может отличаться от сайдбара других страниц. Если вы поместите какие-то виджеты в «боковую колонку избранного», то они естественно будут выведены только на такой странице.

Для того чтобы появились избранные статьи в слайдере, нужно зайти на страницу редактирования важных для вас статей и закрепить их на главной.

76

Просто отметьте галочкой «Прилепить на главную страницу».

Чтобы в слайдере появились изображения, нужно обязательно задать в избранных статьях миниатюры записей.

Как удалить дату публикации записи в самой записи и в ленте?

Откройте файл functions.php. Найдите функцию function twentyeleven_posted_on(). Закоментируйте или удалите строчку:

esc_html( get_the_date() ),

и

esc_attr( sprintf( __( 'View all posts by %s', 'twentyeleven' ), get_the_author() ) ),

Как удалить «Запись опубликована автором … | в рубрике …. | Добавьте в закладки постоянную ссылку»?

Откройте файл content-single.php. Удалите код в пределах

<footer...>     </footer><!-- .entry-meta -->

Как удалить строчку «Рубрика: … | Добавить комментарий?» в конце анонсов в ленте записей?

Откройте файл content.php. Нужно удалить код в пределах:

<footer...>     </footer><!-- .entry-meta -->

Правда в этом случае исчезнет ссылка на редактирование записи. Ссылку вы сможете сохранить, если оставите часть кода:

<footer class="entry-meta">
 <?php edit_post_link( __( 'Edit', 'twentyeleven' ), '<span class="edit-link">', '</span>' ); ?>
 </footer><!-- #entry-meta -->

Как удалить форму комментариев?

Нужно удалить код в файле comments.php в div id=»comments».

Вот код дива:

<div id="comments">
 <?php if ( post_password_required() ) : ?>
 <p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>
 </div>

Причем нужно именно удалить, а не закомментировать, иначе на сайт все равно пробьется спам.

Удалить нужно правильно. Если вы удалите весь див, то пропадет футер. Вам нужно удалить только строчку в теге <p>:

<p class="nopassword"><?php _e( 'This post is password protected. Enter the password to view any comments.', 'twentyeleven' ); ?></p>

Как сделать компактнее форму комментариев?

По умолчанию форма комментирования выглядит громоздко.

форма коментариев твенти элевен

Если расположить поля «имя», «сайт» и «email» в одной строке, то форма будет выглядеть аккуратнее и компактнее.

74

Новая форма будет одинаково хорошо отображаться во всех браузерах, а также адаптироваться под размер окна браузера.

За счет чего произходят изменения? Формы комментирования выводится в теме Twenty Eleven с помощью функции <?php comment_form(); ?>, расположенной в файле comments.php. А вот стиль формы задается строчками 2039 — 2191 в файле стилей.

В файле стилей пропишите новый CSS код формы:

/* Comment Form */
#respond {
	background: #ddd;
	border: 1px solid #d3d3d3;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 auto 1.625em;
	padding: 1.625em;
	position: relative;
	width: 68.9%;
}
#respond input[type="text"],
#respond textarea {
	background: #fff;
	border: 4px solid #eee;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	-moz-box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	box-shadow: inset 0 1px 3px rgba(204,204,204,0.95);
	position: relative;
	padding: 10px;
	text-indent: 80px;
}
#respond .comment-form-author,
#respond .comment-form-email,
#respond .comment-form-url,
#respond .comment-form-comment {
	position: relative;
}
#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-comment label {
	background: #eee;
	-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	color: #555;
	display: inline-block;
	font-size: 13px;
	left: 4px;
	min-width: 50px;
	padding: 4px 10px;
	position: relative;
	top: 40px;
	z-index: 1;
}
#respond input[type="text"]:focus,
#respond textarea:focus {
	text-indent: 0;
	z-index: 1;
}
#respond textarea {
	resize: vertical;
	width: 95%;
}
#respond .comment-form-author .required,
#respond .comment-form-email .required {
	color: #bd3500;
	font-size: 22px;
	font-weight: bold;
	left: 90%;
	position: absolute;
	top: 40px;
	z-index: 1;
}
#respond .comment-notes,
#respond .logged-in-as {
	font-size: 13px;
}
 
#respond .form-submit {
	float: right;
	margin: -20px 0 10px;
}
#respond input#submit {
	background: #222;
	border: none;
	-moz-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
	color: #eee;
	cursor: pointer;
	font-size: 15px;
	margin: 20px 0;
	padding: 5px 42px 5px 22px;
	position: relative;
	left: 30px;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}
#respond input#submit:active {
	background: #1982d1;
	color: #bfddf3;
}
#respond #cancel-comment-reply-link {
	color: #666;
	margin-left: 10px;
	text-decoration: none;
}
#respond .logged-in-as a:hover,
#respond #cancel-comment-reply-link:hover {
	text-decoration: underline;
}
.commentlist #respond {
	margin: 1.625em 0 0;
	width: auto;
}
#reply-title {
	color: #373737;
	font-size: 24px;
	font-weight: bold;
	line-height: 30px;
}
#cancel-comment-reply-link {
	color: #888;
	display: block;
	font-size: 10px;
	font-weight: normal;
	line-height: 2.2em;
	letter-spacing: 0.05em;
	position: absolute;
	right: 1.625em;
	text-decoration: none;
	text-transform: uppercase;
	top: 1.1em;
}
#cancel-comment-reply-link:focus,
#cancel-comment-reply-link:active,
#cancel-comment-reply-link:hover {
	color: #ff4b33;
}
#respond label {
	line-height: 2.2em;
}
#respond input[type=text] {
	display: block;
	height: 24px;
	margin: 0;
	width: 85%;
}
#respond p {
	font-size: 12px;
}
p.comment-form-comment {
	margin: 0;
}
p.comment-form-author,
p.comment-form-email,
p.comment-form-url {
	display: block;
	float: left;
	margin: 0 10px 0 5px;
	width: 30%;
}
 
.form-allowed-tags {
	display: none;
}

В файле comments.php найдите функцию comment_form. Замените ее такими строчками:

<?php comment_form (array (
'comment_field'=>'<div style="clear:both"></div><p class="comment-form-comment"><label for="comment">Комментарий</label><textarea id="comment" name="comment" cols="45" rows="8" aria-required="true"></textarea>'
)); ?>

Как добавить жирности тексту при наведении курсора мыши на меню?

В файле style.css найдите строку #access ul ul :hover. Измените код как в примере:

#access li:hover > a,
#access ul ul :hover > a,
#access a:focus {
background: #efefef;
font-weight: bold;
}

Как удалить лишнее пространство рядом с заголовком сайта?

В файле style.css найдите строку #site-title, #site-description и /* Search Form */.
Измените код как в примере:

/* Search Form */
#branding #searchform {
position: absolute;
top: 2em;
right: 7.6%;
text-align: right;
}
#site-title {
margin-right: 270px;
padding: 1em 0 0;
}
#site-description {
color: #7a7a7a;
font-size: 14px;
margin: 0 270px 1em 0;
}

Как удалить лишнее пространство между меню и заголовком статьи?

В файле style.css найдите строку .singular .hentry и .singular.page .hentry. Измените код:

.singular .hentry {
border-bottom: none;
padding: 1px 0 0;
position: relative;
}
.singular.page .hentry {
padding: 1px 0 0;
}

Как добавить к дате поста время?

Выберите в меню «Настройки» — «Общие». В опции Формат даты выберите «Свой формат» и впишите: Y.m.d, G:i

Какие бы вы изменения не внесли в файлы шаблона, помните: они пропадут, если вы обновите тему.

Возможно вас еще заинтересует:

Добавить комментарий