Нещодавно ми з тобою почали розбиратися в основах створення шаблону WordPress, і починалося все із файлу стилів style.css. Пора продовжити тему. Файл, який відображає головну сторінку сайту – index.php. Погляньмо, що в ньому повинно бути.
Із самого верху розміщуємо вставку верхньої частини сайту (header.php). Цей файл містить початковий код сторінки, потрібний для підключення Doctype, додаткових файлів стилів, Javascript та інших допоміжних файлів. Також у нього можна помістити шапку сайту, щоб не прописувати її в кожному наступному файлі шаблону. Не завадить сюди помістити й верхнє меню, якщо воно не буде змінюватися при переході на інші сторінки. На своєму блозі я туди ж помістив і форму пошуку (оскільки вона "висить" у шапці, на яку сторінку ти б не перейшов/ла). Про цей файл поговоримо детальніше в наступній статті даної категорії. А виводиться він наступним чином:
<?php get_header(); ?>Далі нам потрібно вивести список останніх записів. Робиться це отак:
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="article-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a>
</h1>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="article-thumbnail"><?php echo get_the_post_thumbnail(); ?><!-- Головне зображення -->
<header class="article-header">
<div class="article-date">Дата публікації: <?php echo get_the_date(); ?></div><!-- Дата -->
<div class="article-category">Категорія: <?php echo get_the_category_list($separator = ', '); ?></div><!-- Категорія -->
<div class="article-comments">Коментарів: <a href="<?php the_permalink (); ?>/#comments"><?php comments_number( ' 0', '1', '%' ); ?></a></div><!-- Число коментарів -->
</header>
</div>
<div class="article-content">
<?php the_content( __( 'Читати далі...') ); ?><!-- Читати далі -->
<?php edit_post_link( __( 'Редагувати', '' ), '<span class="edit-link">', '</span>' ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Сторінки:'), 'after' => '</div>' ) ); ?><!-- Посторінкова навігація -->
</div><!-- article-content -->
</article><!-- #post -->
<?php endwhile; ?><!-- Кінець циклу -->
<!-- Якщо нема жодної статті, виводимо наступне: -->
<?php else : ?>
<article class="not-found">
<?php if ( current_user_can( 'edit_posts' ) ) : ?>
<h1 class="article-title"><?php _e( 'Нема що показувати.', '' ); ?></h1>
<div class="article-content">
<p><?php printf( __( 'Готові опублікувати свою першу статтю? <a href="%s">Тоді Вам сюди.</a>.'), admin_url( 'post-new.php' ) ); ?></p>
</div><!-- .article-content -->
<?php else : ?>
<h1 class="article-title"><?php _e( 'Нічого немає'); ?></h1>
<div class="article-content">
<p><?php _e( 'Не знайдено жодної статті, будь ласка, скористайтесь формою пошуку.'); ?></p>
<?php get_search_form(); ?>
</div><!-- .article-content -->
<?php endif; ?>
</article><!--.not-found -->
<?php endif; // кінець перевірки have_posts() ?>Розглянемо детально кожну функцію.
<?php if ( have_posts() ) : ?>Якщо в базі даних є хоч якісь записи, виводимо їх.
<?php while ( have_posts() ) : the_post(); ?>Початок циклу. Розміщуємо записи в порядку спадання по даті від останнього до першого, але враховуючи задану в адмінпанелі кількість записів на сторінці. В мене вказано відображати 10 записів на сторінці, так і відбувається – після десятого запису цикл зупиняється.
<h1 class="article-title">
<a href="<?php the_permalink(); ?>" rel="bookmark"><?php echo get_the_title(); ?></a>
</h1>Виводимо назву статті, попередньо задавши їй стиль заголовка H1 і класс article-title, а також автоматично зробивши назву статті посиланням на неї. Тобто, ми бачимо на головній назву статті і уривок із тексту (довжину уривка задаємо самі при створенні статті, використовуючи тег [more]). Звідси ми можемо вияснити, що функція the_permalink(); відповідає за виведення посилання на статтю, а функція echo get_the_title(); виводить на монітор назву статті.
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>Тут ми створюємо блок для показу окремої статті. Як бачимо, використаний блок article, не так давно введений у HTML5. Далі беремо ідентифікаційний номер статті командою the_ID();, а також автоматично присвоюємо блоку класс, взятий із WordPress: post_class();
<?php echo get_the_post_thumbnail(); ?>Цією командою ми виводимо головне зображення для статті (при написанні з правої сторони є спеціальний блок для вставки головного зображення). Щоб ця функція WordPress працювала належним чином, треба ще прописати її підтримку шаблоном у файлі functions.php – про це ми теж поговоримо згодом.
Далі йде блок із основною інформацією про статтю.
<?php echo get_the_date(); ?>Виводить дату публікації.
<?php echo get_the_category_list($separator = ', '); ?>Категорія публікації (яку обираємо при написанні). Якщо категорій, до яких належить стаття, декілька, то між ними буде ставитися кома та пробіл ($separator = ‘, ‘). Якщо хочемо вивести категорії по іншому, змінюємо значення змінної $separator, наприклад, ($separator = ‘; ‘).
<a href="<?php the_permalink (); ?>/#comments"><?php comments_number( ' 0', '1', '%' ); ?></a>Виводимо кількість коментарів до статті.
<?php the_content( __( 'Читати далі...') ); ?>Цією командою ми виводимо сам текст статті, причому, якщо при створенні статті ми додавали тег [more] (читати далі), то виведеться тільки текст до цього тега, а під текстом автоматично з'явиться посилання на повний текст із позначкою, яку ми тут вказали (Читати далі). Можна внести будь-яку позначку посилання по власному бажанню, наприклад (‘Агов, клацніть тут, щоб прочитати весь текст від початку до кінця!').
До слова, мітки __( 'Some text') тут і далі означають, що текст у шаблоні готовий для перекладу на інші мови, і я вчинив неправильно, внісши текст "Читати далі..." відразу українською. Правильно було б написати цю мітку англійською, а потім внести у файл перекладу пару англійська - українська, типу "Continue reading..." - "Читати далі..." Докладніше про переклад тем розписано в окремій статті.
<?php edit_post_link( __( 'Редагувати', '' ), '<span class="edit-link">', '</span>' ); ?>Після тексту виводимо посилання на сторінку редагування статті, яка буде показуватися тільки адміністрації та авторам сайту. Значення також можна змінювати, наприклад ‘Редагувати' поміняти на ‘Правити текст', а
'<span class="edit-link">', '</span>'на
'<div class="editpost">', '</div>'Йдемо далі.
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Сторінки:'), 'after' => '</div>' ) ); ?>Цю команду вставляємо, якщо передбачається, що на сайті будуть створюватися багатосторінкові статті (при написанні статті частини розділюються між собою тегом):
<!--nextpage-->Далі створюємо уявну ситуацію, коли на сайті немає жодної статті (він щойно створений). В цьому випадку треба для авторів сайту розмістити посилання для створення першої статті, а звичайних користувачів просто повідомити, що сюди ще рано заходити. В першому випадку ставимо код
<?php if ( current_user_can( 'edit_posts' ) ) : ?>
<h1 class="article-title"><?php _e( 'Нема що показувати.', '' ); ?></h1>
<div class="article-content">
<p><?php printf( __( 'Готові опублікувати свою першу статтю? <a href="%s">Тоді Вам сюди.</a>.'), admin_url( 'post-new.php' ) ); ?></p>
</div>В другому
<?php else : ?>
<h1 class="article-title"><?php _e( 'Нічого немає'); ?></h1>
<div class="article-content">
<p><?php _e( 'Не знайдено жодної статті, будь ласка, скористайтесь формою пошуку.'); ?></p>
<?php get_search_form(); ?>
</div><!-- .article-content -->
<?php endif; ?>І в самому кінці додаємо функцію для виводу "підвалу" сайту (нижньої стабільної частини, яка теж не буде змінюватися на жодній сторінці):
<?php get_footer(); ?>Не забудь – якщо ти розміщуєш у файлі index.php функції виклику шапки та підвалу, у папці із твоїм шаблоном ОБОВ'ЯЗКОВО мусять бути присутні файли header.php та footer.php, інакше шаблон не запрацює.
До нових зустрічей!
Прокоментувати
На сайті відображається лише твоє ім'я та коментар. Електронна пошта зберігається виключно для зв'язку з тобою за потреби та в жодному разі не передається стороннім особам.