Урок вп 4. Shit just got real. Как отделить страницу ленты от страницы поста

shit-just-got-real-spongebob

Содержание:

  1. Иерархия файлов внутри Вордпресс
  2. Как single переписывает index
  3. Чем отличаются the_content() и get_template_part(‘content’);
  4. Как вывести ошибки php в браузере, если мы вдруг их натворили;
  5. Как вывести посты в ленте превьюшками, а в записи — целиком;
  6. Функции, необходимые для вывода всего необходимого — заголовка, тегов, категории, автора и контента.

Как я уже писала в предыдущем уроке, если верстка очень сложная, то вывод категории и поста лучше раскидать по двум файлам.

В теме twentyfourteen уже есть файл single.php, и он очень простой:

1

Но что за дела?!? Почему он практически 1 в 1 похож на наш index.php?

Вордпресс имеет внутри себя иерархию файлов. Файлы с определенными названиями оверрайдят другие — имеют преимущество и потому показыватся ВМЕСТО других файлов.

Вот полная схема, сохраните ее себе на будущее, так как сейчас это просто повод отработать взгляд барана на новые ворота:

template-hierarchy

Смотреть можно хоть справа-налево, хоть слева-направо. Внизу пометки — темно-синим — это главные ШАБЛОНЫ, а черным — тип СТРАНИЦЫ. То есть какой шаблон отвечает за какую страницу. Давайте начнем с простого, смотрим справа налево.

Самый главный файл у нас — index.php. Фактически он может отвечать за ЛЮБОЙ файл в системе. Например во втором уровне у нас шаблон 404.php. Он отвечает за вывод ошибки 404. Если этого файла в теме не будет, то ошибку выведет индексный файл. Как в этом убедиться?

Смотрите, так же во втором уровне у нас есть шаблон single.php. Этот шаблон отвечает за вывод единичного поста (записи). Но он почти такой же как индекс! Давайте удалим single.php из папки с темой (перенесите куда-нибудь в другое место файл, не надо удалять полностью)). Обновляем страницу сайта, открываем запись — ничего не имзенилось! Однако изменения все же есть — и мы можем отследить их из испектора.

Как мы можем увидитеть из html-редактора, отличие между single.php и index.php в одном окружающим диве с классом main-content.

3

Откройте страницу поста в браузере и запустите инспектор Хром (файл single мы перенесли, в теме его нет).

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

Задайте поиск в инспекторе (тоже Ctrl+F, только активным должен быть инспектор, а не страница, кликните в нем мышью). Открыли поисковую строку и вставили туда класс main-content. Вот он, родной!

2

Верните назад в папку темы single.php. Обновите страницу поста. Поиск — ха-ха, класс не найден. Теперь вы убедились, что запись выводит то индекс, то single.php в зависимости от наличия файла в теме.

Что это нам дает? Это дает нам возможность выводить разный контент разными шаблонами, с разной версткой. Например twentyfourteen выводит посты и на главной и в записи целиком, вместо превью. Это потому что и там и там мы пользуемся одним и тем же шаблоном content.php, который вызывает контент функцией the_content(). Для того, чтобы вывести превью, а не целиком, нужно использовать функцию the_excerpt().

Внимание! Не путайте функции:
the_content()
и
get_template_part(‘content’);
Первая выводит СОДЕРЖИМОЕ поста (записи), а вторая — тянет ШАБЛОН, отличить можно по слову template, что переводится как шаблон.

Проведем эксперимент. Откройте шаблон content.php и найдите там строку:

the_content( sprintf(
__( ‘Continue reading %s <span class=»meta-nav»>&rarr;</span>’, ‘twentyfourteen’ ),
the_title( ‘<span class=»screen-reader-text»>’, ‘</span>’, false )
) );

Замените the_content на the_excerpt. В скобках оставьте все, как есть. Обновите главную страницу своего блога (ленту). Аллилуйя! Мы видим, что посты сократились до превью и дали нам ссылку на дальнейшее чтение:

4

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

Это потому что оба файла (индекс и сингл) тянут один и тот же шаблон content.php, где мы сменили  the_content на the_excerpt.

 

Что же делать?

Нам нужно разбить эту ситуацию. Мы используем single.php для вывода только поста, а индекс — для вывода только ленты. Так как сингл переписывает индекс в случае, если мы на странице поста, то мы его и оформим для этого. Зато «снаружи» — в ленте индекс будет тащить шаблон content.php как и прежде. Таким образом CONTENT.php отвечает за ленту, а SINGLE.php — за пост.

Значит, нам нужно из content.php вырезать все условия, касающиеся единичного поста — то есть, все места, внутри условия if ( is_single() ) : вместе с этим условием и закрывающим его endif;.

Главное — будьте внимательны! Если какое-то условие останется открытым, или, наоборот, будет лишняя закрывающая скобка } или endif; (как вы помните — они равнозначны, это всего лишь разное написание условий, подробнее здесь: УРОК ВОРДПРЕСС 2. КАК СДЕЛАТЬ БУТСТРАП МЕНЮ В ВОРДПРЕССЕ (BOOTSTRAP MENU IN WORDPRESS)), то вместо сайта вы увидите белый экран.

PHP
Чтобы видеть не просто белый экран, а ошибку php на нем, нужно выйти в корень вордпресса (где лежат папки wp-admin, wp-content и т.п.), открыть файл wp-config.php и задать в поиске WP_DEBUG. Поиск выделит строку define(‘WP_DEBUG’, false); Исправьте false на true. Это позволит Вордпрессу вывести ошибки на фронтенде. Что это значит. В программировании есть такое понятие, как Boolean оператор. Boolean переводится как «логический». Он возвращает результат Правда или Ложь. То есть true или false.
Перевод - это смешно, потому что правда.
Перевод — это смешно, потому что правда.

Данный мем учит нас тому, что восклицательный знак в программирование означет НЕ. НЕ False (ложь) дает нам True (правда).

END PHP

 

Итак, вот, например, мой content.php для вывода ленты на этом сайте: MayDay. Он сокращен в части вывода постов во всплывающих окнах, это пока что слишком сложно для вас. То есть, если бы мой файл выглядел как здесь, то он бы просто открывал пост в той же странице без всех моих ajax-прибабасов.

 

<?php
/**
* The default template for displaying content
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
?>
<article id="post-<?php the_ID(); ?>">
<?php $post_id = get_the_id(); // получаем айди поста и загоняем в переменную ?>
<a href="<?php the_permalink(); ?>">
<?php $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 800,600 ), false, '' ); ?>
<div style="background: #c9dcdc url(<?php echo $src[0]; ?> ) no-repeat 50% 50%; background-size: cover;" class="bg_thumbnail">
</div>
</a>
<header class="entry-header">
<?php if ( in_array( 'category', get_object_taxonomies( get_post_type() ) ) && twentyfourteen_categorized_blog() ) : ?>
<div class="cat-links">
<?php echo get_the_category_list( _x( ', ', 'Used between list items, there is a space after the comma.', 'twentyfourteen' ) ); ?>
</div>
<?php
endif;
?>
<a href="<?php the_permalink(); ?>"><h1 class="entry-title"><?php the_title(); ?></h1></a>

<?php
?>
<div class="title-date"><?php the_time('l - j F Y') ?></div>
<div class="entry-meta">
<?php
if ( 'post' == get_post_type() )
if ( ! post_password_required() && ( comments_open() || get_comments_number() ) ) :
?>
<span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyfourteen' ), __( '1 Comment', 'twentyfourteen' ), __( '% Comments', 'twentyfourteen' ) ); ?></span>
<?php
endif;
edit_post_link( __( 'Edit', 'twentyfourteen' ), '<span class="edit-link">', '</span>' );
?>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->

<?php if ( is_search() ) : ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content">
<?php
the_excerpt( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyfourteen' ) );
wp_link_pages( array(
'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
'after' => '</div>',
'link_before' => '<span>',
'link_after' => '</span>',
) );
?>
</div><!-- .entry-content -->
<?php endif; ?>
<div>

</article><!-- #post-## -->

Скопипастите себе в случае нужды, я же поясню на картинке:

5

 

Блок №1: это из урока «КАК ВЫВЕСТИ IMAGE THUMBNAIL (МИНИАТЮРУ КАРТИНКИ, ПРЕВЬЮ КАРТИНКИ) КАК ФОН?«.

Блок №2: Знакомый нам хэдер, только БЕЗ условия для single, мы просто выводим заголовок, окруженный ссылкой на пост. Над заголовокм идет вывод категорий поста, под заголовокм — дата, ссылка на комментарий и на редактирование поста, если ты залогинен.

Блок№3: Если страница поиска, то выводить превью функцией the_excerpt(); (смотри выше).

Блок №4: Иначе — если мы на общей ленте, то то же самое — выводим превью, но в диве другого класса (чтобы можно было, в случае нужды, прицепиться к стилю и вывести по-другому).

Вот и все в части content.php — вывели превьюшки на общей ленте, то есть — в индексе.

 

А теперь single.php

Код приводить не буду — в нем слишком много разметки для фронтенда, но по сути достаточно вывести функциями заголовок, категорию, автора, теги и сам контент:

6

7

 

Сами функции:

<?php echo '<h1 class="entry-title">' . get_the_title() . '</h1>'; // вывести тайтл (заголовок), окруженный тегами h1 ?>

это равносильно:

<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

<?php the_category(', '); // вывести категории, если больше одной - разделять запятой с пробелом после нее ?>

<?php the_tags("<span>", ', ', '</span>');  // теги, окруженные спанами ?>

<?php
the_content(); // контент

twentyfourteen_post_nav(); // навигация к следующей и предыдущей записи
?>

 



7 thoughts on “Урок вп 4. Shit just got real. Как отделить страницу ленты от страницы поста”