Урок 1. Вордпресс для начинающих

Урок вордпресс 2. Как сделать бутстрап меню в вордпрессе (bootstrap menu in wordpress)

Посмотрим на файлы темы twentyfourteen, которую мы меняем под себя.

Каждый файл, который начинается на content отвечает за вывод поста и постов, но для разных видов записей (галерея, картинка, аудио-файл и т.п.). Выбираем мы, в каком формате показывать контент, в админке поста:

Мы пока что сосредоточимся на выводе самого обычного поста.

Итак, как я уже говорила, индексный файл в вордпрессе по умолчанию выводит ленту записей.

Открываем его и видим следующее:

Нас интересует строка

get_template_part( 'content', get_post_format() );

Вот он — вызов файла content.php.

Кроме этого:

get_header(); ?>

get_sidebar();
get_footer();

Это вызовы шапки, сайдбара и футера.

(самый верх и самый низ файла)

if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
 // Include the featured content template.
 get_template_part( 'featured-content' );
}

Тема поддерживает вывод «избранных» постов над общей лентой, которые вы тегируете как featured в админке (присваиваете записи Метку (tag) ‘featured’).

Открываем content.php.

Столько всего, и ничего не понятно.

На самом верху, в закомментированной области вы увидите: Used for both single and index/archive/search. То есть «Используется и для страницы одного поста, и для индекса (ленты) / архива / страницы поиска. Вот такой вот мультифункциональный файл! По идее, можно создать под каждую страницу свои файлы, которые будут выводить поиск, архивы и индекс по-разному. И сделать отдельно файл вывода одного поста. Но здесь очень интересный принцип, который мы сейчас разберем.

Во-первых — откройте шпаргалку вп-условий и сохраните к себе как закладку! Этим списком вы будете пользоваться постоянно.

И смотрим, какие из этих условий мы здесь используем:

Single [сингл] — это ОДИНОКИЙ. И в смысле «неженатый», и в смысле песни из альбома.

Search — это поиск, искать.

То есть мы ставим условия:

если (одинокий файл) : делать то-то;

если (страница поиска) : то выводить то-то.

Итак, что такое у нас single? Это страница ПОСТА (записи).

Например:

if ( is_single() ) :
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( '<div class="thumb_header"><h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2></div>' );
endif;

Что делает данный блок?

Если (это страница поста) :
вывести заголовок, окруженный тегами '<h1 class="entry-title">', '</h1>';
иначе :
вывести заголовок, окруженный тегами ''
<div class="thumb_header"><h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2></div>
'';
конец условия;

get_permalink() — это ссылка на запись, переводится как «получить пермалинк».

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

Что еще нужно выучить:

the_excerpt(); — выводит превью текста.

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

Сокращенно:

the_content( );  — выводит текст (контент). В скобках указано, добавить ссылку «Продолжить чтение — стрелка (→) — Заголовок». Пока не думайте об этом ).

wp_link_pages(); — выводит пэйджинацию (постраничную навигацию) в многостраничных постах.

Вот этот кусок отвечает за вывод страницы поста (записи):

Как можно изменить вывод постов в ленте? Рассмотрим пример: блог Digiproduct.

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

Как вывести image thumbnail [имадж тамбнейл] (миниатюру картинки, превью картинки) как фоновую картинку?

<?php
if ( !is_single() ) :
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 300, 173 ), false, '' );
?>
<div style="background: #dedede url(<?php echo $src[0]; ?> ) no-repeat 50% 0%; background-size: cover;" class="thumb">
</div>
<?php endif; ?>

Разбираем построчно:

if ( !is_single() ) : — если НЕ страница одинокого поста (то есть в нашем случае — если индекс, архив или поиск);

$src = wp_get_attachment_image_src(); — получить адрес картинки;

get_post_thumbnail_id($post->ID) — получить тамбнейл (превью) айди (идентификатор картинки) для поста -> айди (идентификатор поста).

array( 300, 173 ) — размеры превью, будут использованы ближайшие из настроек (Вордпресс генерит несколько копий каждой картинки, чтобы грузить на мобильные устройства уменьшенные копии и экономить траффик)

<?php echo $src[0]; ?> — мы сохранили прикрепленную к записи картинку в виде Объекта в переменную $src. Объект здесь — это архив, который хранит все данные о картинке — урл (ссылку на картинку), подпись (alt) и т.п. Первое значение этого архива $src[0]; (считаем в программировании с нуля! То есть — 0, 1, 2 и т.п.) — это урл картинки.