Статьи

Полная шпаргалка по WordPress

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

Но то, что вы видите на поверхности, когда настраиваете и запускаете WordPress, – это лишь небольшая часть того, что происходит за кулисами. На самом деле, красивый интерфейс, который мы все так любим, – ничто по сравнению с суматохой активности за кулисами. Я имею в виду, что WordPress работает на двух довольно сложных веб-технологиях, известных как PHP и MySQL.

Другие технологии, которые играют определенную роль, включают JavaScript, его близкий родственник jQuery, CSS и HTML. Темы WordPress (и даже плагины) в основном написаны на PHP и для работы используются базы данных MySQL. Они также зависят от вышеупомянутых веб-технологий. Все эти технологии должны работать вместе.

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

Анатомия темы

Полная шпаргалка по WordPress

Тема WordPress – это просто несколько связанных вместе файлов PHP. Он поставляется с файлом таблицы стилей CSS, который отвечает за внешний вид вашей темы (и сайта). Но вернемся к основам: тема WordPress – это всего лишь пара файлов PHP. Выше приведен снимок отличного tuts + cheatsheet для анатомии темы WordPress. Для создания темы WordPress вам потребуются следующие файлы:

  • header.php – этот файл шаблона содержит информацию заголовка, которая появляется в разделе и перед открывающим тегом . Здесь вы, среди прочего, добавляете метаданные, заголовок сайта и ссылку на свою таблицу стилей CSS.
  • index.php  – это основной шаблон для вашей темы (или сайта) WordPress. Его единственная цель – собрать воедино другие файлы, включив их с помощью тегов шаблона (подробнее о тегах шаблонов чуть позже).
  • sidebar.php  – это ваш раздел боковой панели. Вы можете размещать виджеты, категории, дополнительные меню, форму поиска и все, что вам нравится
  • footer.php – это раздел нижнего  колонтитула. Добавьте информацию об авторских правах, ссылки RSS, виджеты, ссылки, значки социальных сетей и т.д.
  • page.php  – всякий раз, когда вы создаете страницу на своем сайте на базе WordPress, это отвечает шаблону
  • single.php – файлы этого шаблона содержат  одно сообщение в блоге.
  • comments.php  – шаблон, отвечающий за их комментарии
  • 404.php  – шаблон, отображаемый, когда ваш читатель обнаруживает печально известную ошибку 404 не найден.
  • search.php –  Предлагает вашим читателям возможность найти контент на вашем сайте WordPress.
  • searchform.php –  Вам понадобится форма поиска, чтобы предлагать вышеупомянутые функции, не так ли?
  • archive.php –  Потому что найти контент, который вы опубликовали в 2008 году, не составит труда
  • functions.php –  Поместите сюда все специальные функции и даже пользовательские плагины. Однако для кросс-тематической совместимости вам рекомендуется добавлять собственный код в качестве автономных плагинов. Вы можете добавлять дополнительные меню, активировать виджеты и многое другое. Этот файл дает вам столько возможностей, чтобы превратить ваш сайт / тему WordPress так, как вы хотите.
  • style.css –  это не файл шаблона PHP как таковой. Но это файл, в который вы добавляете свои стили CSS, чтобы управлять эстетикой. Он также поставляется с информационным заголовком для вашей темы WordPress.

Без сомнения, вы можете создать тему с меньшим количеством шаблонов, но мы не рекомендуем делать из этого привычку. В конце концов, для создания стандартной темы WP вам просто нужны указанные выше 10 файлов. Тринадцать – небольшая цифра, правда? Вкратце, ваш index.php может выглядеть примерно так:

<?php

get_header(); ?>

<?php

get_sidebar(); ?>
<?php

get_footer(); ?>

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

Петля

В некоторых из наших предыдущих серий публикаций, таких как популярное руководство WordPress: Как создать тему WordPress из HTML, мы упоминали цикл, хотя и мимоходом. Так что же делает цикл популярным сниппетом? Что ж, без этого специального фрагмента кода вам пришлось бы вручную кодировать каждое сообщение вместе с выдержками в своей теме WordPress. Вы будете делать это каждый раз, когда публикуете новую статью.

Усилия и время, которые вы потратите впустую, заставят вас посинеть и окоченеть. Отпечаток углерода, который вы оставите после себя – после того, как вы проработаете себя до смерти – пробьет дыру размером с двенадцать стадионов Янки в озоновом слое. Что ж, я преувеличиваю факты (или их отсутствие), но вы бы сошли с ума, если бы вручную кодировали каждую запись на своем сайте WordPress.

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

<?php
if (have_posts() ): while (have_posts() ): the_post();
        
    endwhile;
endif; ?>

Обычно мы используем цикл в index.php для отображения списка сообщений, но можете экспериментировать; добавьте его туда, где вы хотите разместить свои сообщения. Кроме того, добавьте в цикл собственные теги HTML и PHP, чтобы настроить свои сообщения так, как вы считаете нужным. Кстати о тегах, что доступно в WordPress?

Включить теги

Полная шпаргалка по WordPress

Теги включения шаблона – это просто PHP-коды, которые вы используете в любом файле шаблона для включения (или, скорее, вызова) других файлов шаблона из папки вашей темы WordPress. Вот о чем мы говорим:

  • <?php get_header(); ?> – Используйте это в index.php для вызова (или включения) файла header.php. Он получит header.php и отобразит его содержимое в index.php – вот что такое включение файла.
  • <? php get_sidebar (); ?> –  Включает sidebar.php
  • <? php get_footer (); ?> –  Включает файл шаблона footer.php
  • <? php comments_template (); ?> –  Быстрый тест: как вы думаете, что делает этот включаемый тег?

Шаблон Bloginfo Теги

Есть еще одна категория тегов шаблонов, которые мы просто назовем тегами bloginfo. Они играют одну роль: извлекают информацию о вашем сайте WordPress из базы данных. В основном это информация, которую вы загружаете на свой сайт WordPress в админке через Профиль пользователя и Настройки -> Общие. Как только информация будет извлечена из ваших баз данных, эти теги будут отображаться на вашем сайте так же, как вы их разместили.

Вы можете немного изменить структуру bloginfo, чтобы вместо простого отображения полученной информации вы могли использовать ее (информацию) в другом месте вашего PHP-кода. Насколько удобно? Подробнее об этом чуть позже. Вот наиболее распространенные теги bloginfo:

  • <? php bloginfo (‘имя’); ?>  – отображает заголовок вашего блога / сайта WordPress.
  • <? php bloginfo (‘url’); ?> –  Этот тег шаблона отображает URL вашего блога.
  • <? php bloginfo (‘описание’); ?>  – отображает описание или, скорее, слоган вашего блога.
  • <? php bloginfo (‘кодировка’); ?>  – отображает набор символов, используемый для кодирования вашего сайта. По умолчанию UTF-8
  • <? php bloginfo (‘stylesheet_url’); ?>  – показывает URL-адрес таблицы стилей CSS вашей активной темы.
  • <? php bloginfo (‘версия’); ?>  – Отображает версию WordPress, которую вы используете
  • <? php bloginfo (‘язык’); ?>  – Отображает язык WordPress
  • <? php bloginfo (‘rss_url’); ?>  – отображает URL-адрес канала RSS 0.92.
  • <? php bloginfo (‘rss2_url’); ?> –  отображает URL-адрес канала RSS 2.0.

Есть несколько других тегов bloginfo, которые вы можете использовать для улучшения своей темы WordPress. Теперь о той небольшой модификации bloginfo, о которой мы говорили пару секунд назад. До сих пор мы использовали <? Php bloginfo (); ?>. Давайте изменим это на: <? Php $ bloginfo = get_bloginfo ($ show, $ filter); ?>. Позвольте мне разбить параметры:

  • $ show это ключевое слово, которое вы используете для обозначения информации, которую вы хотите получить из базы данных. Примеры включают “имя”, “URL”, “описание”, “admin_email” и т.д.
  • $ filter –  позволяет фильтровать полученную информацию. По умолчанию для него установлено значение «raw», что означает, что значение $ show возвращается как есть. Установка этого параметра на ‘display’ приведет к тому, что значение $ show будет сначала передано через функцию wptexturize (). Но пока не переживайте по этому поводу.

Вот пример: предположим, что мы хотим получить и отобразить ваш слоган (описание сайта), который выглядит как «Лучшие премиальные темы WordPress», мы сначала извлечем эту информацию с помощью этого тега …

<?php $site_description = get_bloginfo( 'description' ); ?>

Который загружает описание сайта в $ site_description. Чтобы отобразить описание вашего сайта на вашем сайте, используйте это:

<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>

Это дает вам: Ваш слоган: Лучшие премиальные темы WordPress.

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

Таблица стилей темы

Мы упоминали style.css ранее. Опять же, почему важен файл style.css? Во-первых, он предоставляет подробную информацию о вашей теме. Эта информация попадает в заголовок таблицы стилей, который помогает идентифицировать тему во время выбора в области администрирования. Таким образом, никакие две темы не должны содержать одинаковые детали в заголовках таблиц стилей. Вот пример заголовка таблицы стилей:

Эта информация идет первой (или самой верхней) в style.css. Помимо этого, убедитесь, что вы:

  • Следуйте стандартам кодирования CSS
  • Используйте действительный CSS
  • Свернуть CSS
  • Добавьте удобные для печати стили
  • Стилизуйте все элементы HTML

Последние мысли

Эта шпаргалка – всего лишь краткий ресурс, который поможет вам начать изучение разработки тем WordPress. Используя теги и фрагменты, которыми мы здесь поделились, вы можете быстро разработать стандартную тему и улучшить ее, не напрягаясь. Конечно, вам нужно продолжать изучать разработку тем WordPress, и для этого мы рекомендуем WordPress Codex, tuts +, Threehouse и ThemeShaper среди других авторитетных ресурсов.

Помимо этого, пожалуйста, не стесняйтесь делиться своими советами, читами, фрагментами или чем-нибудь еще, что вы имеете в виду, в комментариях ниже. Мы хотели бы узнать, где и как вы узнали о WordPress. Увидимся!

Кнопка «Наверх»