Статьи

Как создать страницу часто задаваемых вопросов с WordPress и пользовательскими типами записей

Январь 9, 2019

В мире Интернета страница часто задаваемых вопросов создается специально для зрителей / клиентов и содержит общие вопросы и соответствующие ответы о конкретном продукте или услуге. В этом уроке подробно описан процесс создания выделенного раздела FAQ в бэкэнде WordPress с пользовательскими типами постов, а также о том, как немного оживить фактическую страницу с помощью jQuery и CSS.

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

Шаг 1: Установка WordPress

Чтобы начать создавать страницу часто задаваемых вопросов, мы, конечно, должны сначала установить WordPress на наш локальный хост. Установка WordPress — это просто; однако, если вы новичок в этом, вот руководство, которое детализирует процесс.

Шаблон TwentyTen — это тема по умолчанию, которая поставляется вместе с WordPress.

Как только WordPress будет готов к работе, мы должны создать нашу собственную тему, которая будет реализовывать функции FAQ. Существуют различные способы создания собственной темы. Некоторые предпочитают создавать новый пустой белый шаблон, в то время как другим нравится создавать дочерние темы нового шаблона TwentyTen. Я давно использую тему Старкера Эллиота Джея Стокса ; мы будем использовать его для создания новой темы для нашей системы FAQ.

Загрузите последнюю версию пустой темы Starker и переместите папку в папку «wp-content / themes», расположенную в папке установки WordPress. Также обязательно переименуйте его в FAQ. Затем войдите в панель администрирования внутреннего WordPress, нажмите «внешний вид / темы». Вы обнаружите, что тема TwentyTen по умолчанию активирована, а новая тема «Starkers» указана под ней. Активируйте тему Старкеров.

активировать тему Старкера

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

пустая тема Старкера

Шаг 2: Реализация пользовательского поста FAQ

Чтобы реализовать систему FAQ, мы собираемся создать собственный тип поста исключительно для этой цели. Это позволит нам управлять всеми часто задаваемыми вопросами в одном месте, особенно если база вопросов часто увеличивается.

Чтобы реализовать собственный пост, отредактируйте файл functions.php расположенный в папке темы FAQ. Он будет содержать хороший кусок кода, так что не пугайтесь и не путайтесь. Прокрутите вниз и добавьте следующее, чтобы добавить новый пользовательский пост. Мы начнем с создания привязки пользовательской функции к действию инициализации ( init ).

1
2
// ADDING CUSTOM POST TYPE FAQ
add_action(‘init’, ‘my_custom_init’);

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

01
02
03
04
05
06
07
08
09
10
11
12
13
$labels = array(
   ‘name’ => _x(‘FAQs’, ‘post type general name’),
   ‘singular_name’ => _x(‘FAQ’, ‘post type singular name’),
   ‘add_new’ => _x(‘Add New’, ‘FAQ’),
   ‘add_new_item’ => __(‘Add New FAQ’),
   ‘edit_item’ => __(‘Edit FAQ’),
   ‘new_item’ => __(‘New FAQ’),
   ‘view_item’ => __(‘View FAQ’),
   ‘search_items’ => __(‘Search FAQs’),
   ‘not_found’ => __(‘No FAQs found’),
   ‘not_found_in_trash’ => __(‘No FAQs found in Trash’),
   ‘parent_item_colon’ => »
 );

После того как мы определили метки, мы затем определим array arguments для метода register_post_type . Эти аргументы содержат всю важную информацию, которая будет определять компоненты нашего поста FAQ. Например, будет ли у него поле тега; коробка выдержки? В качестве аргумента мы также передаем массив меток, определенных выше.

01
02
03
04
05
06
07
08
09
10
11
12
$args = array(
    ‘labels’ => $labels,
    ‘public’ => true,
    ‘publicly_queryable’ => true,
    ‘show_ui’ => true,
    ‘query_var’ => true,
    ‘rewrite’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘menu_position’ => 5,
    ‘supports’ => array(‘title’,’editor’,’thumbnail’,’custom-fields’)
  );

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function my_custom_init()
{
  $labels = array(
    ‘name’ => _x(‘FAQs’, ‘post type general name’),
    ‘singular_name’ => _x(‘FAQ’, ‘post type singular name’),
    ‘add_new’ => _x(‘Add New’, ‘FAQ’),
    ‘add_new_item’ => __(‘Add New FAQ’),
    ‘edit_item’ => __(‘Edit FAQ’),
    ‘new_item’ => __(‘New FAQ’),
    ‘view_item’ => __(‘View FAQ’),
    ‘search_items’ => __(‘Search FAQs’),
    ‘not_found’ => __(‘No FAQs found’),
    ‘not_found_in_trash’ => __(‘No FAQs found in Trash’),
    ‘parent_item_colon’ => »
  );
  $args = array(
    ‘labels’ => $labels,
    ‘public’ => true,
    ‘publicly_queryable’ => true,
    ‘show_ui’ => true,
    ‘query_var’ => true,
    ‘rewrite’ => true,
    ‘capability_type’ => ‘post’,
    ‘hierarchical’ => false,
    ‘menu_position’ => 5,
    ‘supports’ => array(‘title’,’editor’,’thumbnail’,’custom-fields’)
  );
  register_post_type(‘faq’,$args);
}

Проверьте панель администрирования, чтобы определить, действительно ли пост типа FAQ был успешно добавлен. Надеюсь, вы увидите вкладку FAQ на боковой панели.

Пользовательский пост добавлен на панель инструментов

Пустышки FAQ

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

Добавление нескольких демонстрационных сообщений

Шаг 3: Кодирование шаблона

До сих пор мы создавали пользовательские посты FAQ, а также вставляли образцы данных. Теперь мы будем кодировать шаблон для отображения часто задаваемых вопросов, соответственно. Основная логика, которую я использовал для организации шаблона: используйте уникальный идентификатор FAQ, чтобы связать вопрос с ответами. Следовательно, у нас есть две части в шаблоне: раздел вопросов, в котором перечислены все заголовки FAQ; и раздел ответов, в котором отображается содержание каждого из часто задаваемых вопросов.

Найдите файл header.php , откройте его, удалите div с id «access» внизу, а также параграф, который содержит описание блога. Теперь добавьте следующий код.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<body >
    <div id=»page-wrap»>
    <h1>
        <a href=»» title=»» rel=»home»>
    </h1>
    <?php
    /**
     * The main template file.
     *
     * This is the most generic template file in a WordPress theme
     * and one of the two required files for a theme (the other being style.css).
     * It is used to display a page when nothing more specific matches a query.
     * Eg, it puts together the home page when no home.php file exists.
     * Learn more: http://codex.wordpress.org/Template_Hierarchy
     *
     * @package WordPress
     * @subpackage Starkers
     * @since Starkers 3.0
     */
     get_header();
 
    <?php
        query_posts(‘post_type=faq&order=ASC’)
    ?>

После того, как мы получим данные постов часто задаваемых вопросов, мы должны определить архитектуру того, как вопросы будут отображаться. Мы сделаем это следующим образом. Весь контент заключен в div с id «content».

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<div id=»content»>
    <?php if (have_posts()) : ?>
        <h3>FAQs</h3>
        <div id=»questions»>
            <ul>
                <?php while (have_posts()) : the_post();
                <li><a href=»#answer<?php the_id() ?>»><?php the_title();
                <?php endwhile;
            </ul>
        </div>
    <?php else : ?>
        <h3>Not Found</h3>
        <p>Sorry, No FAQs created yet.</p>
    <?php endif;

Наиболее важной частью здесь является то, где мы назначаем гиперссылку со значением «#answer» и добавляем к ней id . Мы можем использовать это, чтобы перейти к ответам при нажатии.

После того, как мы отобразили все вопросы, мы «перематываем» наши сообщения, чтобы вернуться к началу.

1
<?php rewind_posts();

Теперь мы будем структурировать, как будут появляться ответы, чуть ниже вопросов.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
<?php if (have_posts()) : ?>
    <div id=»answers»>
        <ul>
            <?php while (have_posts()) : the_post();
                <li id=»answer<?php the_id(); ?>»>
                    <h4><?php the_title();
                    <?php the_content();
                </li>
            <?php endwhile;
        </ul>
    </div>
    <?php endif;
    <?php wp_reset_query();
</div>
<?php get_footer();

Вы можете видеть, что мы собираемся перечислить содержание каждого сообщения в элементе списка. Каждый элемент списка будет иметь id «ответы» с добавленным к нему ID . Это важно: когда на вопрос нажимают, вид переходит к содержанию соответствующего поста. Если вы работаете вместе, просмотрите ваш сайт; Вы должны увидеть все сообщения, перечисленные в архитектуре, описанной выше.

Часто задаваемые вопросы без стайлинга

Шаг 4: стилизация шаблона

Стиль страницы часто задаваемых вопросов полностью зависит от ваших вкусов; Вы можете действовать любым способом, каким пожелаете. Если вы дизайнер, не стесняйтесь пропустить Шаг 4 . То, что я лично реализовал, является гладким и чистым макетом. Когда пользователь нажимает на вопрос, страница плавно перемещается вниз к соответствующему ответу и выделяет его, изменяя цвет и увеличивая размер шрифта. Чтобы достичь этого, мы начнем со стилизации шаблона с помощью CSS. Мы также можем использовать CSS3 для добавления некоторых теней и эффектов перехода. Добавьте следующий CSS в styles.css .

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
body{
    background-color: #bcbcbc;
}
.clear {
    clear: both;
}
h1,h2,h3,h4,h5,h6{
    color:#424242;
    font-family:Georgia,Arial,Helvetica,sans-serif;
    text-shadow: #fff 1px 1px 0px;
}
h1 a{
    color:#424242;
    font-size:50px;
    position:relative;
    top:11px;
    font-weight: normal;
    z-index: 100;
}
h3{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
}
h4{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}
a{
    color: #3299bb;
    text-decoration: none;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#page-wrap{
    width: 750px;
    position: relative;
    margin: 0px auto 20px auto;
    padding-top: 50px;
}
#content{
    background-color: #e9e9e9;
    padding: 64px 35px 22px;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
    -moz-box-shadow: rgba(0,0,0,1) 0px 0px 4px;
    box-shadow: rgba(0,0,0,1) 0px 0px 4px ;
}
#content p{
    text-align:justify;
    font-size: 12px;
    line-height: 18px;
    margin-bottom: 10px;
}
#questions{
    margin-bottom: 50px;
}
#questions li{
    margin-bottom: 20px;
    color: #3299bb;
    list-style-type: disc;
    list-style-position: inside;
}
#questions ul li a{
    font-weight: bold;
}
#questions ul li a:hover{
    color: #00befd;
}
#questions ul li a:active{
    color: #e78c03;
}
#answers ul li{
    margin-bottom: 30px;
    clear: both;
}
#footer{
    padding-top:5px;
    text-align:center;
}
#footer p{
    color: #424242;
}
#footer a{
    color: #424242;
    font-weight: bold;
}

После стилизации страницы мы должны стилизовать текущий FAQ. Обратите внимание, что мы также добавили кнопку «Top» в текущий FAQ. Чтобы создать кнопку, мы будем использовать несколько свойств CSS3.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.current-faq{
    background-color: #424242;
    color: #e9e9e9;
    padding:30px 30px 23px;
}
.current-faq h4{
    color: #e9e9e9;
    font-weight: bold;
    font-size:22px;
    text-shadow: #000 1px 1px 0px;
}
.top-button {
    border-top: 1px solid #96d1f8;
    background: #2289a8;
    background: -webkit-gradient(linear, left top, left bottom, from(#3299bb), to(#2289a8));
    background: -moz-linear-gradient(top, #3299bb, #2289a8);
    padding: 4px 8px;
    -webkit-border-top-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    border-top-left-radius: 6px;
    -webkit-box-shadow: rgba(0,0,0,1) -1px -1px 0;
    -moz-box-shadow: rgba(0,0,0,1) -1px -1px 0;
    box-shadow: rgba(0,0,0,1) -1px -1px 0;
    text-shadow: rgba(0,0,0,.4) -1px -1px 0;
    color: #ffffff;
    font-size: 11px;
    font-family: Georgia, serif;
    text-decoration: none;
    vertical-align: middle;
    font-weight: bold;
    float: right;
    right:-30px;
    position: relative;
}
.top-button:hover {
    border-top-color: #0b93bd;
    background: #0b93bd;
    color: #ffffff;
}
.top-button:active {
    border-top-color: #e78c03;
    background: #e78c03;
}

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

Стиль текущего класса

Шаг 5: добавление пинч-интерфейса jQuery

Мы будем использовать jQuery UI, чтобы добавить некоторые эффекты на страницу. Вы можете скачать jQuery UI здесь . Нам нужно только ограниченное использование всей библиотеки пользовательского интерфейса, поэтому достаточно будет загрузить только основные компоненты пользовательского интерфейса. Нам также нужен плагин jQuery scrollTo для достижения эффекта плавной прокрутки — хотя вы также можете легко кодировать эту функцию самостоятельно. Тем не менее, чтобы сэкономить время, вы можете скачать плагин здесь .

Сначала мы ссылаемся на jQuery, файлы jQuery UI Core и плагин scrollTo в файле header.php . Вы можете сделать это, добавив следующий код непосредственно перед wp_head() .

1
2
3
4
5
6
7
8
9
<?php wp_enqueue_script(«jquery»);
 
<script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js» type=»text/javascript»></script>
 
<script src=»<?php bloginfo(‘template_url’) ?>/js/jquery-ui-1.8.4.custom.min.js» type=»text/javascript»></script>
 
<script src=»<?php bloginfo(‘template_url’) ?>/js/jquery.scrollTo.js» type=»text/javascript»></script>
 
<script src=»<?php bloginfo(‘template_url’) ?>/js/main.js» type=»text/javascript»></script>

wp_enqueue_script необходима для безопасной загрузки jQuery.

Чтобы включить желаемую функциональность, мы выбираем значение атрибута href из элемента, по которому щелкнули (т.е. вопрос). Это значение является id элемента списка, который содержит ответ. Затем мы прокручиваем до элемента списка и применяем class ‘current’. Пользовательский интерфейс jQuery обеспечит плавную и динамическую реализацию класса в элементе списка.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
$(document).ready(function(){
    $(«div#questions ul a»).click(function(){
        var selected = $(this).attr(‘href’);
        selected += ‘»‘+selected+'»‘;
        /*—Removing the Current class and the top button from previous current FAQs—*/
        $(‘.top-button’).remove();
        $(‘.current-faq’).removeClass();
        $.scrollTo(selected, 400 ,function(){
            $(selected).addClass(‘current-faq’, 400, function(){
                $(this).append(‘<a href=»#» class=»top-button»>TOP</a>’);
            });
        });
        return false;
    });

Как упоминалось ранее, у нас также есть кнопка «Наверх», которая прокручивает страницу обратно вверх.

1
2
3
4
5
6
7
8
$(‘.top-button’).live(‘click’,function(){
        $(this).remove();
        $(‘.current-faq’).removeClass(‘current-faq’,400,function(){
            $.scrollTo(‘0px’, 800);
        });
        return false;
    })
});

Шаг 6: Заключение

То, что вы узнали сегодня, является лишь одним из способов реализации страницы часто задаваемых вопросов. WordPress предоставляет возможности настраиваемых полей, которые можно использовать для дальнейшего улучшения функциональности системы FAQ. Когда дело доходит до добавления других функций на нашу страницу часто задаваемых вопросов, ваш собственный творческий потенциал является единственным ограничением! Не стесняйтесь делиться своими идеями в комментариях!

37
Share: