Начало работы с темами WordPress для детей

Статья написана:
  • WordPress
  • Обновлено: июль 27, 2013

Итак, вы представляете, что начинаете свои твики в мире WordPress, и вы нашли много удивительных тем. Вы даже найдете много премиальных тем, и большинство из них действительно стоит своей цены (несколько книг для профессионального вида и кода). И большинство тем вы найдете так близко, но никто точно не хочет этого. Было бы неплохо немного переместить панель меню, чтобы заменить шрифт, чтобы добавить новый текстовый блок.

Ну, если это звучит знакомо, это руководство для вас. Здесь мы погрузимся в мир дочерних тем, где вы можете делать практически все, что захотите, не нарушая потрясающую тему, которую вы купили, или не теряя будущие обновления, потому что все, что вы делаете, будет отменено.

Редактирование внешнего вида без изменения файлов тем

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

Он будет содержать по крайней мере файлы 2, style.css и файл functions.php, все остальные файлы будут схвачены из родительской темы, поэтому, если вы не создадите новый файл в каталоге дочерних тем, вы будете использовать родительские файлы.

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

Пойдем, наши руки грязные

Итак, самым первым шагом является создание нового каталога дочерних тем в папке / wp-content / themes /. Назовем его «Twenty-Child», и давайте создадим наш основной файл styles.css:

/ * Название темы: Twenty Child Theme URI: http://www.webrevenue.co Описание: Изучение детской темы прямо сейчас Автор: Рочестер Оливейра Автор URI: http://www.webrevenue.co/author/rochester/ Шаблон: двадцать четверть * / / * Вызов основной темы CSS-файла * / @import ("..//2twelve / style.css"); / * Добавьте все, что хотите ниже * /

Параметры (среди других необязательных параметров опущены):

  • Название темы: имя, которое вы увидите под экраном выбора тем
  • Тема URI: ссылка, которая будет показана там
  • Описание: Краткое описание, чтобы вы помнили, что это такое
  • Автор: Кто создал дочернюю тему
  • Автор URI: если вы хотите установить ссылку на сайт автора
  • Шаблон: основная папка темы (поэтому, если вы хотите использовать другую тему в качестве основной, просто замените этот параметр)

После добавления этого кода вы увидите дочернюю тему в разделе «admin»> «Внешний вид»> «Темы». Вы можете выбрать его сейчас, и все сделанные изменения будут видны на вашем сайте.

Редактирование дочерних объектов 101

Это может быть бесполезно, если у вас есть нулевые знания CSS, не так ли? Неправильно! CSS на самом деле довольно простой, и вы можете найти множество фрагментов, которые помогут вам там. Вот несколько простых советов, которые помогут вам в настройках.

#1 Установить Firebug

Многим нравится просто Chrome и Safari (так и я!), Но для меня FireFox намного лучше развивается. Поэтому, если вы хотите использовать его, я рекомендую вам также установить firebug, который является прекрасным инструментом для понимания всех селекторов, которые активны в текущем элементе.

После его установки вы можете нажать F12 или щелкнуть правой кнопкой мыши где-нибудь на странице и выбрать «Inspect Element». Вы увидите новое окно с текущей страницей HTML и CSS (и много полезных вкладок, возможно, мы сможем поговорить о них позже).

В поле CSS вы увидите сверху вниз все правила CSS, применяемые к текущему элементу, и более «конкретное» правило в верхней части. Это круто, но посмотрим, что вы можете сделать с этой информацией

#2 Рассмотрим спецификацию CSS (или вес селектора)

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

  • ! важная декларация перезапишет что-нибудь еще
  • Встроенный CSS будет перезаписывать что угодно, кроме! важные правила
  • ID (#header, #footer, # container ...) стоит 100 точек
  • Классы (.main, .nav, .box) стоят 10 точек
  • Теги (body, div, p, a) стоит точка 1
  • Универсальный селектор и псевдоклассы (*,: hover,: after) стоят 0, но они будут применяться, если есть «галстук»,

Хорошо, давайте посмотрим пример, чтобы лучше понять это. Щелкните правой кнопкой мыши заголовок вашего сайта, используя двадцать двенадцать, и вы увидите, что первый CSS, который появляется, выглядит так:

.site-header {padding: 1.71429em 0; } статья, в сторону, детали, figcaption, фигура, нижний колонтитул, заголовок, hgroup, nav, section {display: block; }

Первый селектор имеет точки 10 (так как это класс), а второй имеет точку 1 каждый (поскольку запятые просто разделяют разные селекторы), поэтому он появляется в верхней части. Если бы у вас было что-то вроде #header div, то этот селектор наверняка был первым, кто появлялся.

Почему это так важно?

Поскольку для редактирования основной темы без редактирования ее CSS-файлов вам нужно ВСЕГДА использовать правила с большим количеством точек, чем правила, определенные в основной теме. И вы можете быть в курсе этого и использовать простой код. Например, чтобы переписать это свойство:

.site-header {padding: 1.71429em 0; }

Вы можете добавить это в свою дочернюю тему CSS, но не должны:

.site-header {padding 15px 0! важный; }

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

body .site-header {padding: 15px 0; }

Этот селектор имеет точки 11, который больше исходного 10 и поэтому этот код будет применен.

#3 Эффективное использование функций

Файл child functions.php является единственным файлом, который будет загружен в ADDITION в исходный файл. Это умное решение, сделанное командой WP, поэтому вы можете сохранить оригинальные функции и добавить свои собственные функции. Уловка, функции дочерней темы будут загружены первыми, и разработчик темы ДОЛЖЕН сделать что-то подобное, чтобы избежать конфликтов при объявлении функций:

if (! function_exists ('top_menu')) {function top_menu () {// здесь классный код} add_action ('wp_head', 'top_menu'); }

Это потому, что если вы определите функцию в файле вашей дочерней темы, она может перезаписать исходную. Если разработчик темы не сделает этого таким образом, вы получите ужасную ошибку PHP (поскольку одна и та же функция создается дважды).

#4 Изучите некоторые свойства CSS

Знаете ли вы, что можете скрыть и добавить материал с помощью CSS? Вам нужно будет установить firebug, чтобы найти правильный селектор, но вы можете скрыть элемент, добавив этот код:

body a {display: none}

Чтобы добавить это сложнее, так как вы можете добавлять только небольшие тексты, если вам нужен текст «On Sale!» После ценника, например, вы можете использовать этот код:

.price del: after {color: red; содержание: «В продаже!»; }

Как вы думаете?

Что вы думаете об этом руководстве? Будете ли вы рассматривать детские темы? Вы уже используете его? Дайте нам знать, используя раздел комментариев ниже!

О Рочестер Оливейра

Я веб-дизайнер и предприниматель из Итажуба (МГ), Бразилия. Я люблю писать на непонятные темы и делать интересные вещи.

Подключение: