Как создать оглавление в записи WordPress

Оглавление - необходимая часть сообщений WordPress, особенно длинных сообщений с большим количеством заголовков. Создание оглавления помогает читателям легко и быстро понять и усвоить идею. Кроме того, это также помогает вам добавлять больше ключевых слов в сообщения, что очень хорошо для SEO.

Способы создания оглавления

Есть 2 метода создания оглавления в сообщении WordPress.

Первый способ - использовать плагин. Это просто, быстро и бесплатно как для экспертов по кодированию, так и для новичков в WordPress.

Второй - с помощью кода. Это позволяет вам настраивать оглавление даже до мельчайших деталей, но это довольно сложно для не кодировщика. Мы напишем код для создания оглавления в этом посте. Просто скопируйте и вставьте его!

Давайте сначала рассмотрим процесс создания оглавления с помощью плагина:

Метод 1. Использование подключаемого модуля для создания оглавления

Шаг 1. Создайте и настройте содержание для содержания

Существует множество бесплатных плагинов для создания оглавления в WordPress. Мы выбрали LuckyWP Table of Contents, потому что оно дает нам легко настраиваемый и красивый результат. Однако у этого плагина довольно много настроек, которые поначалу могут вас запутать. Итак, следуйте нашим инструкциям, чтобы сэкономить свое время.

LuckyWP Table of Contents - это бесплатный плагин, доступный на wordpress.org. Вы просто устанавливаете и активируете плагин на Dashboard .

Затем перейдите в « Настройки» > «Оглавление» , вы увидите экран настроек.

Здесь есть 4 вкладки, на которые нужно обратить внимание: Общие, Внешний вид, Автоматическая вставка, Обработка заголовков . Это вкладки, используемые для настройки и настройки отображения оглавления. Разное. - вкладка со сложными и несущественными настройками, поэтому ее можно игнорировать.

На этом этапе вы просто работаете на вкладке « Общие ».

В этом разделе множество настроек. Чтобы сэкономить время, вам следует сосредоточиться на следующих важных частях:

• Нумерация: Пронумеровать заголовки. Вы должны выбрать один из следующих вариантов: без нумерации, десятичные числа (вложенные), римские числа (вложенные) .

Я выбираю десятичные числа (вложенные) , поэтому мой оглавление выглядит так:

• Заголовок: Заголовок содержания. По умолчанию это Содержимое .

Оставим остальные настройки по умолчанию, потому что это не сильно повлияет на ваш оглавление.

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

Шаг 2. Вставьте содержание в сообщение

Есть 2 метода вставки оглавления в сообщение: автоматически и вручную.

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

Вставка вручную означает, что если вы хотите, чтобы оглавление было в сообщении, вам нужно вставить его в это сообщение самостоятельно. Это может занять больше времени и привести к ошибкам.

Мы подробно представим оба метода. Вы можете выбрать тот вариант, который вам подходит.

Автоматическая вставка

Перейдите на вкладку « Автоматическая вставка»> «Включить» . Плагин по умолчанию выбирает публикацию . Если вы этого не хотите, вы можете сменить тип сообщения на другой.

В разделе « Положение » выберите, куда вы хотите вставить оглавление. Не забудьте нажать « Сохранить изменения» !

Итак, у всех постов в выбранном типе постов есть оглавления.

Вставка вручную

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

Затем перейдите в редактор сообщения выбранного типа сообщения и нажмите « Включить оглавление» .

Теперь ваш оглавление в основном готово. Кроме того, мы даже можем стилизовать его цвет, шрифт, размер элементов… чтобы сделать его красивее. Следуйте следующему шагу.

Шаг 3. Настройте отображение содержания

Есть также 2 метода настройки отображения оглавления: настроить его для всех сообщений сразу и индивидуально настроить для каждого сообщения.

Настроить оглавление во всех сообщениях

Вы можете детально настроить все оглавления, перейдя на вкладку « Внешний вид ». Есть много настроек, таких как Размер шрифта заголовка, Размер шрифта элементов, Цвет ссылки ,…

Необязательно замечать все настройки, просто сосредоточьтесь на том, что хотите.

Например, мне не нравится синий цвет и текущий размер шрифта заголовка. Я хочу изменить цвет на темно-серый и поменьше, чтобы они лучше смотрелись с постом. Итак, я настрою размер шрифта заголовка, размер шрифта элементов, цвет ссылки и сохраню остальные настройки, как на изображении ниже:

Мой оглавление после настройки выглядит так:

Теперь это выглядит намного гармоничнее.

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

Настройте оглавление в каждом сообщении

Эта работа также проста и быстра. Сначала перейдите в редактор сообщений, выберите «Оглавление»> «Настроить» .

Появится всплывающее окно настройки содержания . Вы увидите несколько знакомых вкладок, как указано выше. Это Общие, Внешний вид и Разное. .

Перейдите на вкладку « Внешний вид » и измените некоторые настройки аналогично редактированию на панели управления плагина. Для завершения нажмите « Сохранить» !

Теперь посмотрим на окончательный результат настройки оглавления.

Оба метода настройки предоставляют очень красивое и подробное оглавление. Так что вы вольны выбирать то, что вам нравится.

Теперь давайте посмотрим, как использовать код для создания оглавления.

Метод 2: Используйте код для создания оглавления.

Шаг 1. Создайте оглавление для публикации

Перейдите в Внешний вид> Тема> Редактор> functions.php .

Затем добавьте следующий код в файл functions.php чтобы вставить оглавление в сообщения.

Примечание. Этот код предназначен для добавления только двух уровней заголовков в оглавление .

 function create_toc ($ html) {
    $ toc = '';
    if (is_single ()) {
        если (! $ html) return $ html;
        $ dom = новый DOMDocument ();
        libxml_use_internal_errors (правда);
        $ dom-> loadHTML (mb_convert_encoding ($ html, 'HTML-ENTITIES', 'UTF-8'));
        libxml_clear_errors ();
        $ toc = '<div class = "toc-bound">
            <div class = "toc-ctr">
                оглавление
            </div>
            <ul class = "toc"> ';
        $ h2_status = 0;
        $ h3_status = 0;
        $ i = 1;
        foreach ($ dom-> getElementsByTagName ('*') as $ element) {
            if ($ element-> tagName == 'h2') {
                if ($ h3_status) {
                    $ toc. = '</ul>';
                    $ h3_status = 0;
                    }
                 if ($ h2_status) {
                    $ toc. = '</li>';
                    $ h2_status = 0;
                  }
                  $ h2_status = 1;
                  $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. '</a>';
                  $ element-> setAttribute ('идентификатор', 'toc-'. $ i);
                  $ i ++;
            } elseif ($ element-> tagName == 'h3') {
                if (! $ h3_status) {
                    $ toc. = '<ul class = "toc-sub">';
                    $ h3_status = 1;
                }
                $ toc. = '<li> <a href="'. get_the_permalink().'#toc-'. $i.'">'. $ element-> textContent. '</a> </li>';
                $ element-> setAttribute ('идентификатор', 'toc-'. $ i);
                $ i ++;
            }
        }
        if ($ h3_status) {
            $ toc. = '</ul>';
        }
        if ($ h2_status) {
            $ toc. = '</li>';
        }
        $ toc. = '</ul> </div>';
        $ html = $ dom-> saveHTML ();
    }
    вернуть $ toc. $ html;
}
add_filter ('the_content', 'create_toc');

Объяснение:

Не забудьте щелкнуть файл обновления после вставки кода.

Тогда вот результат:

Конечно, нам нужно немного его стилизовать. Мы будем использовать CSS - любимый инструмент всех программистов.

Шаг 2. Используйте CSS для настройки

Для настройки с помощью CSS перейдите в файл style.css в редакторе тем . Там вам нужно вставить код, который вы пишете самостоятельно, чтобы настроить оглавление по своему усмотрению.

Например, я хочу настроить цвет и интенсивность оглавления, поэтому я вставлю следующий код:

 .toc-bound {
    цвет фона: # 619162;
    цвет: #fff;
}
.toc-ctr {
    нижняя граница: сплошной 1px #fff;
    отступ: 10 пикселей;
    размер шрифта: 20 пикселей;
    преобразование текста: прописные буквы;
}
ul.toc {
    тип-стиль-список: нет;
    отступ: 10 пикселей;
    отступ слева: 25 пикселей;
}
.toc li a {
    цвет: #fff;
}
ul.toc> li {
    размер шрифта: 18 пикселей;
    font-weight: 700;
    отступ: 5px 0;
}
ul.toc-sub {
    тип-стиль-список: нет;
}
ul.toc-sub li a {
    font-weight: 200;
}

Не забудьте нажать на файл обновления, чтобы сохранить его.

Окончательный результат выглядит так:

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

Последние слова

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

Если у вас есть какие-либо вопросы, задавайте их в поле для комментариев ниже.