Вы знаете, какие мои любимые разработки WordPress? Те, где я начинаю с нуля и создаю тему самостоятельно. Мне действительно не нравится прыгать в ранее измененную тему и пытаться понять, что происходит.
Итак, позвольте мне показать вам мои собственные быстрые исправления для создания темы WordPress. Я расскажу о некоторых очевидных хитростях, с которыми вы, вероятно, столкнетесь, и покажу, как быстро запрыгнуть в драку.
Шаг 1: Детская тема или бюст
Я подробно описываю создание дочерней темы в других постах, но вот дурная и грязная версия. Создайте папку в каталоге тем, сохраните указанный ниже CSS как style.css и поместите его в папку:
[sourcecode language = ”css”]
/ *
Название темы: Двадцать двенадцать детей
Шаблон: двадцать двенадцать
* /
@import url («../entytwelve / style.css»);
[/исходный код]
Этот пример использует стандартную тему Twenty Twelve в WordPress и делает ее вашей собственной. Если у вас есть собственная тема, просто замените имя папки темы в теге Template и в операторе импорта.
Теперь перейдите в «Внешний вид»> «Темы» и выберите свою дочернюю тему. Это самый безопасный способ создания кода, и, честно говоря, это намного меньше отвлекает от работы с чистого листа.
Шаг 2: измените изображение заголовка
В WP 3.5+ и некоторых старых темах вы обычно можете загружать заголовок сайта через диалог «Внешний вид»> «Заголовок» или «Внешний вид»> «Параметры темы». Если в вашей теме это доступно, лучше использовать его, чем жестко закодировать графику.
Но для вас, Ranger Joes, которым нужно жестко закодировать изображение, вы обычно можете найти то, что ищете, в файле header.php. Тема «Двадцать двенадцать» имеет удивительно сложный пример того, как раздуть некоторый простой код. Итак, если вы можете работать с этим кодом, у вас все будет хорошо:
[sourcecode language = ”php”]
<? php $ header_image = get_header_image ();
if (! empty ($ header_image)):?>
<a href=»<?php echo esc_url( home_url(‘/’) ); ?> «> <img src =» <? php echo esc_url ($ header_image);?> «class =» header-image «width = «<? php echo get_custom_header () -> width;?>» height = «<? php echo get_custom_header () -> height;?>» alt = «» /> </a>
<? php endif; ?>
[/исходный код]
Вы можете изменить это так:
[sourcecode language = ”php”]
<a href=»http://www.yoursite.com»> <img src = «http://www.yoursite.com/some-folder/image.jpg» class = «header-image» width = «1000 пикселей «height =» 288px «alt =» «/> </a>
[/исходный код]
Установите ширину и высоту так, как вам нужно. Так как у вас есть класс header-image, вы можете войти туда и добавить некоторые дополнительные элементы по мере необходимости, такие как border, max-width и тому подобное.
Шаг 3. Импорт веб-шрифта
Действительно отличный способ придать сайту индивидуальный подход — использовать уникальный шрифт для заголовков. Я большой поклонник выбора Google.com/fonts, и их невероятно легко реализовать.
Простой пример — один из моих любимых шрифтов — Simonetta. У него четыре стиля, так что вы можете извлечь из него много рычагов. Если вы хотите импортировать все четыре стиля, поместите это в свой файл style.css для своей темы.
Примечание: если у вас есть дочерняя тема, убедитесь, что этот код импорта появляется после импорта style.css родительской темы.
[sourcecode language = ”css”]
@import url (http://fonts.googleapis.com/css?family=Simonetta:400,900,400italic,900italic);
[/исходный код]
Теперь вы можете объявить этот шрифт для любого из ваших стилей — от абзацев до заголовков или даже определенных классов. Чтобы этот веб-шрифт работал для ваших тегов H1, просто добавьте его в свой файл style.css:
[sourcecode language = ”css”]
h1 {
семейство шрифтов: ‘Simonetta’, курсив;
Размер шрифта: 30px;
}
[/исходный код]
Шаг 4: Цвета, Цвета, Цвета!
Другой действительно простой способ придать сайту свой собственный вид — изменить цветовую схему. Пока вы будете слышать всевозможные аргументы о читабельности (и вы должны обратить на них внимание), я пропущу их и просто скажу так: сохраняйте шрифты и их фон высокой контрастности. Период. При этом давайте изменим некоторые цвета в теме, например, цвета фона и шрифты заголовков.
Прежде чем переходить к документу style.css, посмотрите, есть ли у вашей темы интерфейс для изменения цвета, например «Внешний вид»> «Фон» или «Внешний вид»> «Параметры темы». С этим намного проще работать и выявлять конфликты, если вы используете встроенную функциональность для цветов фона. У большинства тем есть они в эти дни.
Если нет, то в вашем CSS вам просто нужно определить это в элементе body:
[sourcecode language = ”css”]
тело {
цвет фона: красный! важно;
}
[/исходный код]
Обратите внимание, что я использовал! Важный код для переопределения любых других функций, которые могли блокировать мой код. При работе с дочерней темой это может произойти, и простой обходной путь заключается в том, чтобы просто бросить оператор! Important после вашего кода.
Вы можете столкнуться с той же проблемой с цветами шрифта (и другими стилями в этом отношении).
[sourcecode language = ”css”]
h2 {
цвет: красный! важно;
}
[/исходный код]
Теперь, если вы посмотрите на свой сайт и не увидите каких-либо изменений, скорее всего, потому, что этот конкретный заголовок может иметь свой собственный класс. Например, настройка по умолчанию для Twenty Twelve H2 в сообщении заключается в переносе заголовка в класс «entry-title», который также является ссылкой. Поэтому вам нужно настроить это в вашем файле style.css следующим образом:
[sourcecode language = ”css”]
.entry-title a {
цвет: красный! важно;
}
[/исходный код]
Если элемент, который вы хотите изменить, находится в каком-либо контейнере с идентификатором, вам, возможно, придется объявить стиль следующим образом:
[sourcecode language = ”css”]
# entry-title a {
цвет: красный! важно;
}
[/исходный код]
Обратите внимание, что я использовал символ «#» вместо периода перед объявлением. Это говорит вашей теме искать что-то с идентификатором «entry-title», например:
[sourcecode language = ”html”]
<div id = «entry-title»> <h2> <a href=»#»> Некоторые заголовки </a> </ h2> </ div>
[/исходный код]
Шаг 5: Интеграция слайдера / карусели изображений
Я думаю, что у каждого разработчика WordPress есть свой любимый слайдер, но мой — Revolution Slider . Это не бесплатно, но стоит всего несколько баксов за всю функциональность. Нужно потрудиться, чтобы слайды выглядели потрясающе, но конечный результат может быть совершенно потрясающим.
Многие премиальные темы поставляются со встроенным слайдером, но если вам нужна бесплатная, чтобы начать, проверьте Meta Slider . Он имеет несколько параметров и несколько каруселей изображений, встроенных в один плагин.
Независимо от того, какую систему слайдера или карусели вы используете, перетаскивание ее на домашнюю страницу и добавление некоторых изображений может оказать существенное влияние на дизайн и может занять всего несколько минут.
Заворачивать
С помощью настраиваемого графического заголовка, работы с причудливым шрифтом и изменения цветовой схемы некоторых основных элементов, таких как заголовки и фоны, вы также можете быстро изменить тему, чтобы иметь индивидуальный вид для любой марки, с которой вы можете работать.
Как часто вам предлагается адаптировать тему WordPress? Вы предпочитаете начинать с нуля, или вы готовы создать дочернюю тему и создать собственный WordPress?