Как создать тему для WordPress. Часть 8: файлы content.php, single.php, comments.php

Это восьмой урок о том, как создать тему для WordPress из верстки. Вы узнаете, как сделать шаблон для одиночной записи – файл single.php.

Что обычно выводится на странице записи? Заголовок и содержимое записи, мета-данные (такие как дата, рубрики, метки), и, конечно, комментарии и форма для отправки комментария. Давайте создадим страницу, на которой будут присутствовать все эти элементы.

Шаг 1 Подготовительные работы

Для начала, давайте немного оптимизируем структуру файла index.php. Как вы уже знаете, это основной шаблон темы для вордпресс, и именно он будет срабатывать, если более подходящий шаблон не найден. Сейчас в этом файле содержится достаточно большая часть кода, которая отвечает за вывод содержимого записи. Вот она:

Именно эта часть кода отрабатывает на всех страницах темы, где есть хоть какое-то содержимое. Поэтому, чтобы упроситить дальнейшую работу над темой, этот кусок кода нужно вынести в отдельный файл, который будет называться content.php. Копируем, вставляем, удаляем эту часть в index.php 🙂 Сейчас нужно подключить вывод этого фрагмента. Сделаем это при помощи функции get_template_part():

В итоге, файл index.php будет выглядеть вот так:

То же самое давайте проделаем с файлом archive.php, который мы создали в прошлом уроке.

Теперь создайте копию файла index.php и переименуйте ее в single.php. Сделаем небольшие изменения в этом файле. Для начала, удалим оттуда вывод постраничной навигации, так как она все равно не будет использоваться на этой странице. В итоге, файл single.php должен получиться таким:

Шаг 2 Вывод мета-данных записи

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

А теперь начинается магия 🙂 Создайте копию файла content.php, и назовите ее content-single.php. Затем поменяйте функцию get_template_part в файле single.php, чтобы она выглядела вот так:

Этим мы сделаем так, чтобы на странице одиночной записи содержимое выводилось из файла content-single.php.

И далее, уже в файле content-single.php, перед закрывающим тегом article, добавляем:

Мы создали новый элемент – футер записи. В него добавили:

  • Строка 2 – это вывод ссылки на редактирование записи для администатора,
  • строка 3 – добавление списка тегов,
  • строка 4 – добавление списка рубрик.

Теперь, при желании, можете их стилизовать при помощи CSS. Кстати, если хотите, то в футере записи также можно разместить ссылки типа “поделиться в социальных сетях” и многое другое.

Шаг 3 Вывод комментариев

Следующим, и наверное самым сложным шагом, будет вывод комментариев для записи. Во-первых, откройте файл single.php, и сразу после get_template_part добавьте эту функцию:

Так мы проверим, во-первых, разрешено ли добавление комментариев к записи, и есть ли к ней комментарии, и если одно из этих условий соблюдается, то выведем список комментариев. За то, как именно комментарии будут выведены, отвечает файл comments.php.

Шаг 4 Файл comments.php

Создайте новый пустой PHP-файл с названием comments.

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

Сначала давайте проверим, не защищена ли запись паролем.:

Потом проверим, есть ли к записи коммментарии:

Если комментарии есть, то их нужно вывести:

Теперь добавим заголовок для списка комментариев. Он будет содержать число комментариев и название записи:

Также нужно добавить постраничную навигацию, она будет появляться, если страниц с комментариями много. Для этого добавим такой код до и после вывода списка комментариев:

Ну и напоследок сделаем уведомление на случай, если комментариев к записи нет, и комментирование запрещено:

В итоге, содержание файла comments.php должно получиться примерно следующее:

Шаг 5 Вывод формы для добавления комментариев

Вывести форму для добавления комментариев можно при помощи функции comment_form:

Добавьте эту функцию в конце файла comments.php до закрывающего тега div.

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

На этом работа с файлом шаблона комментариев закончена. Осталось немного настроить стили вывода комментариев через CSS.

Шаг 6 Оформление списка комментариев

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

Эти строки нужно добавить в файл стиле темы, или, если брать пример той темы, которую переношу на WordPress в этом примере я, в файл /css/style.css.

Шаг 7 Важные мелочи

Все практически готово, осталось совсем чуть-чуть: необходимо вывести число комментариев к записи на главной странице блога, странице архивов и странице отдельной записи. Поэтому, будем редактировать файлs content.php и content-single.php.

Там есть вот такой список, который выводится слева от заголовка записи рядом с датой:

Заменим первую строку, чтобы получилось вот так:

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

Итоги

После всех проделанных действий, мы получили вот такой список комментариев и форму для их добавления:

Список комментариев
Список комментариев

Из этого урока вы узнали, как создать страницу для вывода одиночной записи, а также создали файлы content.php, content-single.php, comments.php. Чтобы не пропустить следующий урок, подписывайтесь на обновления блога.




34 комментария к “Как создать тему для WordPress. Часть 8: файлы content.php, single.php, comments.php”

  1. Сергей

    Это все очень блин сложно))

    Ответить
  2. edgi

    Жаль что все уроки похожи друг на друга.
    очень полезно будет коментирование каждой строчки в коде. для чего она нужна и т.д.
    почти нет таких подробных уроков. А у многих как у Вас вставьте вот этот готовый текст в файл index.php и будет вам счастье. В чем же уроки заключаются?

    пример:

    Ответить
    • Ирина

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

      Мне кажется, что если у человека есть знания HTML и CSS, и элементарные знания английского языка, то он без проблем разберется в том, что и для чего нужно. Уроки расчитаны на тех, у кого работа с HTML проблем не вызывает, о чем было написано в предисловии к нему: https://oriolo.ru/sozdaem-html5-temu-dlya-wordpress-rukovodstvo/.

      Ответить
    • Виктор

      edgi, специально для вас, я нашел тему с комментариями. Она чистая, с минимальной разметкой. Хорошо сгодится для дальнейшей разработки своей темы. Скачать можно с github: https://github.com/saxap/clean-wp-template

      Ответить
  3. Даниил

    А продолжение будет? например про page.php, хотя всё ясно, но всё же. И ещё, ваши css стили не применяются к комментам.

    Ответить
    • Дамир

      Данил создай сначала свою простую тему с html и css, потом внедряй в них голый PHP и форматирую получившийся контент через свой CSS-файл.
      Автор в этом курсе совершил типичную ошибку как и другие, пишущие курсы по темизации, вместо того чтобы сосредоточится только на функциях шаблонов, путают обучающихся лишними телодвижениями в кодах CSS и HTML, сложной и громоздкой темы Striped.

      Ответить
      • Ирина

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

        Ответить
    • Ирина

      Даниил, продолжение будет. Просто сейчас почти нет свободного времени, чтобы его написать. Может быть, у Вас ошибка в CSS, если он не применяется?

      Ответить
  4. Алекс

    Комментирование каждой строчки это для даунов. Если вы нуждаетесь в этом, это повод задуматься, а нужно ли вам переходить на более “продвинутые” знания.

    Ответить
  5. Akira Tsukizawa

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

    Хотелось бы обратиться к автору с вопросом. Запутанный случай, поэтому примером опишу.
    Данная страница в хлебных крошках отображается как – Главная/Разработка/Как создать тему для WordPress…и так далее, в моей же теме последняя часть будет отображаться названием последней добавленной записью на сайт, и меняться каждый раз при появлении новой статьи. Так вот, как можно указать title для статьи?
    Раньше была похожая проблема, не смотря на то что в header.php стоит – , в заголовках сайта было название последней записи, не помню уже как изменил, но сейчас похожий случай, вот только на этот раз проблема скорее всего в single.php
    Не знаю даже как с этим бороться 🙁
    Заранее спасибо.

    Ответить
  6. Евгений

    Добрый день! Большое спасибо за хорошее пошаговое руководство по темизации. Вы не планируете в обозримом будующем сделать подобное руководство по созданию плагинов?

    Ответить
  7. Александр

    Ирина, подскажите пожалуйста – как вывести блок хтмл-кода только в полной записи, без вывода блока в анонсах (рубрики, архивы и др.) – тема twenty thirteen: wordpress.org/themes/twentythirteen
    там тоже есть content.php но я не понял – куда вставить код?
    Вот фрагмент этого файла:

    Ответить
    • Ирина

      Александр, чтобы вывестии код только в полной записи, его нужно добавить в файл single.php. Конкретно в теме twenty thirteen – до функции twentythirteen_post_nav()

      Ответить
  8. Тимур

    Здравствуйте!
    Помогите убрать ссылку “изменить” внизу страницы в теме Twenty Thirteen.
    Заранее спасибо.

    Ответить
  9. Amine

    Было бы хорошо добавить pagination для вашей статьи, а то не удобно между частями переключаться… а так спасибо вам большое (merci beaucoup) за познавательный материал.

    Ответить
    • Ирина

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

      Ответить
  10. Вадим

    Здравствуйте Ирина! Подскажите пожалуйста как в настройки темы добавить окна, например окно для своих ксс, или окно для вставки кода Гугл Аналитикс?

    Ответить
    • Ирина

      Для этого нужно сделать страницу настроек темы (очень много материала на эту тему гуглится по запросу “options page”). Также есть большое количество фреймворков, которые облегчают задачу. Я использую Titan Framework (http://www.titanframework.net/).

      Ответить
  11. Николай

    Здравствуйте, Ирина.
    Благодарю за статьи, Вы очень помогли!

    Ответить
  12. Игорь

    Большое спасибо! Помогли решить проблему))

    Ответить
  13. Эмиль

    Я несколько лет назад верстал темы для юкоза. Его простота состояла в том, что мы брали, грубо говоря, HTML-тему, делили её по кускам (индекс, вывод записей, комментарии итд), добавляли юкозовские функции, и на этом почти все. Все выводилось и обрабатывалось как следует.

    В принципе, тут ситуация тоже похожая. Но вот меня немного пугает и запутывает то, что автор редактирует много HMTL-кода. Что-то куда-то подгоняет. Скорее всего, было бы немного проще для новичков, если сделать реально базовую тему без кучи стилей. Сконцентрировать внимание чисто на добавлении функций. Мне не совсем хватает объяснения функций (есть аналог htmlbook.ru только по функциям WP и желательно на русском?). Я не много понимаю в PHP, поэтому с пятой статьи я часами сижу и думаю почему именно так, а не иначе. Пытаюсь понять логику.

    Может кому-то знакомы сайте, где объясняются все файлы шаблона (comments.php, single.php итд) и желательно на русском? И сайты, где можно просмотреть все доступные функции с их пояснением?

    А так, спасибо Ирине за проделанный труд. С горем пополам мне удалось создать свою тему 🙂

    Ответить
    • Ирина

      Спасибо за комментарий, да, я уже начала переписывать эти уроки с использованием простой базовой темы, где не нужно будет html править. Справку по всем доступным функциям можно посмотреть в Кодексе WordPress (http://codex.wordpress.org/), он в том числе есть и на русском, но лучше смотреть английский, там более актуальные тексты.

      Ответить
  14. михаил

    А зачем создавать contentsingle? Почему нельзя все в single.php засунуть? Зачем так много файлов делать?

    Ответить
    • Ирина

      Михаил, можно и в single все написать, но как правило, если данные разделить, то работать с темой удобнее.

      Ответить
  15. Ducem

    Очень полезно. Спасибо!

    Ответить
  16. Сергей

    Огромное спасибо! 🙂 Неделю уже мучаю WP, пытаюсь освоить. Прочитал всё с 1 части разом!)) Попутно делая, конечно вряд ли запомню все эти функции, но, как минимум, в голове отложились принципы.

    Ответить
  17. Виктор

    Спасибо Ирина за ваши уроки. 🙂 Так получилось, что только на вашем сайте, я разобрался в “особенностях схемы построения” WP-темы. Было сложно, но я разобрался (с трудом правда) Вся фишка в том, что я учусь на другом шаблоне, а не на том, что мы тут разбираем. И мне хотелось бы узнать функции для создания меню. В HTML и CSS я шарю нормально, но вот этот PHP – страшный сон для меня. Надеюсь научиться.

    Ответить
  18. VicKey

    Когда будет продолжение? Я уже заждался 🙂

    Ответить
  19. Владимир

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

    Ответить
  20. Михаил

    Спасибо Вам за серию статей о создании темы!
    Очень помогает в работе и постоянно пользуюсь как справочником 🙂

    Ответить

Оставить комментарий