3.3 Створення категорій та записів
Після проведення всіх розробок по сайту наступним кроком є створення категорій та записів. Для створення категорії потрібно у вкладці «Записи» обрати підпункт «Категорії». Далі потрібно заповнити поля назви категорії, опис категорії (Рис. 3.19).
Рис. 3.19. Створення категорії
Після створення всіх потрібних категорій структура буде мати наступний вигляд (Рис. 3.20).
Рис. 3.20. Категорії
Для того щоб, вивести назву та опис категорії потрібно використати наступні коди:
<?php echo get_cat_name (id категорії) ?>
<?php echo get_category_description (id категорії) ?>
Наприклад: вивід назви та опису категорії «Унікальний дизайн»:
<section id="unique-design" name="unique-design" class="text-md-center text-xs-center">
<div class="bg2-overlay">
<div class="container">
<div class="unique-header wow zoomIn" data-wow-duration="s" data-wow-delay="0.3s">
<h3 class="name-section-style-h2">
<?php echo get_cat_name(4) ?></h3>
<div class="name-section-style-h1 text-uppercase">
<?php echo category_description( 4 ); ?></div>
<hr class="hr-standart story"></div>
Д
ля
створення записів потрібно у вкладці
«Записи» обрати підпункт «Додати». Далі
потрібно заповнити поля назви запису
та опис запису. Якщо запис відноситься
до категорії потрібно обрати її. Також
можна добавити допоміжні поля.(Рис.
3.21).
Рис. 3.21. Створення записів
Якщо запис повинен містити картинку, то слід прописати в файлі function.php наступний рядок коду:
add_theme_support('post-thumbnails');
І тоді в записі з’явиться пунк «Головне зображення» (Рис. 3.22).
Рис. 3.22. Пункт «Встановити головне зображення»
Для того щоб вивести запис або категорію з записом потрібно скористатись наступним кодом:
<?php if ( have_posts() ) : query_posts('p=1' або ‘cat=1’);
while (have_posts()) : the_post(); ?>
<?php the_title(); ?> виводить назву запису
<?php the_content(); ?> виводить опис
<?php the_excerpt(); ?>виводить цитату
<?php the_post_thumbnail(array(100, 100)); ?> виводить картинку з параметрами
<? endwhile; endif; wp_reset_query(); ?>
Наприклад: вивід категорії «Послуги»
<section id="what-we-do" name="what-we-do">
<div class="container">
<div class="what-do-header wow zoomIn text-md-center text-xs-center" data-wow-delay="0.4s">
<h3 class="name-section-style-h2"><?php echo get_cat_name(5) ?></h3>
<h2 class="name-section-style-h1 text-uppercase"><?php echo category_description( 5 ); ?></h2>
<hr class="hr-standart">
<?php if ( have_posts() ) : query_posts('p=81');
while (have_posts()) : the_post(); ?>
<div class="desc">
<?php the_content(); ?>
</div>
</div>
<br>
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="skill-img wow slideInLeft">
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(auto); ?>
<?php endif; ?></div>
</div>
<? endwhile; endif; wp_reset_query(); ?>
Якщо картинка має власні стилі то слід виводити картинку за допомогою наступного коду:
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(array(100, 100), array('class' => 'img-circle')); ?>
<?php endif; ?>
Для перегляду картинку у збільшеному вигляду був застосований наступний код. Наприклад картинки секції «Брендинг».
<section id="our-partner" class="text-md-center text-xs-center">
<div class="container">
<div class="row">
<div class="clients wow zoomIn" data-wow-duration="2s" data-wow-delay="0.5s">
<?php if ( have_posts() ) : query_posts('p=103');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
<?php if ( have_posts() ) : query_posts('p=105');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
<?php if ( have_posts() ) : query_posts('p=107');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
<?php if ( have_posts() ) : query_posts('p=109');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
<?php if ( have_posts() ) : query_posts('p=111');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
<?php if ( have_posts() ) : query_posts('p=113');
while (have_posts()) : the_post(); ?>
<div class="col-md-2 col-sm-4 col-xs-6">
<?php if ( has_post_thumbnail() ) : ?>
<a class="item-brand" href="<?php
$large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large' );
echo $large_image_url[0]; ?>"> <?php the_post_thumbnail(array (120, 120)); ?></a>
<?php endif; ?></div>
<? endwhile; endif; wp_reset_query(); ?>
</div>
</div>
</div>
</section>