Как добавить Автоматическое оглавление в WordPress

Недавно я добавил автоматическое оглавление в наши более длинные сообщения.  Его код довольно минимален, и, поскольку он автоматический, мне не нужно беспокоиться о его обслуживании. Я расскажу вам, что он делает, чтобы вам не приходилось копаться в нашем минимизированном коде, если вы хотите использовать его. То, что вы видите здесь, – это первый рабочий проект, разработанный специально для наших нужд. Это может быть усовершенствовано в плагин, но я прошу вас не делать этого, так как у нас есть планы. Вот как это выглядит:

[aesop_image force_fullwidth=”off” lightbox=”off” captionposition=”left” captionsrc=”custom” align=”center” imgwidth=”800px” img=”https://techblog.sdstudio.top/wp-content/uploads/2020/09/2020-09-21_17-43-51.jpg” panorama=”off”]

Концепция автоматического оглавления

В длинных статьях, если я хочу оглавление, я добавляю этот шорткод:

[autoc]

Вот и все. Он автоматически собирает заголовки до указанного уровня и создает ссылку на них в виде списка. Вы знаете, как это происходит: это шорткод, зарегистрированный через PHP, вся магия происходит в JS, а внешний вид исходит от CSS. Я разобью каждый язык, чтобы вы поняли, что я имею в виду.

Шорткод PHP

Этот создает div с двумя настройками в качестве атрибутов данных. В stopatуказывает уровень заголовка (от h1 до h6) , до которого вы хотите видеть в оглавлении. Я обнаружил, что, если он углубляется в каждый маленький подзаголовок, список может оказаться очень длинным, и мне не нравится этот вид. Например, я не хочу включать опрос. offsetЭто отрегулировать положение прокрутки в пикселях. На этом сайте мы хотим прокрутить на 20 пикселей выше, где он обычно прокручивается (точная вершина заголовка). Это маленькая деталь, но она лучше. Кроме того, это могло бы противостоять липкому меню, если бы оно было Оба не допускаются для более удобного использования, так как имеют значения по умолчанию.

Здесь используется только одна функция WordPress, которая очень проста. Полный шорткод с параметрами не по умолчанию будет выглядеть так:add_shortcode()

[autoc stopat=h3 offset=30]

Код ядра JS

О, сердце всего этого. Он строит список всех необходимых заголовков. Реальные заголовки и версии их оглавления связаны. Этот слаг может быть позже использован для #permalinks, но я решил пропустить эту функцию. Так что он еще не манипулирует URL. Щелчки по ссылкам в списке делают анимированный переход к парному заголовку, так просто. Основное внимание было уделено автоматизации, поэтому мне не нужно вести оглавление вручную.

Как видите, jQuery является зависимостью, но, конечно, то же самое можно было бы сделать и без него. Наш сайт уже имеет его, так почему бы не использовать его? Это было проще.

Немного CSS

С несколькими уровнями основные заголовки должны быть понятны вместе со своими детьми.

.autoc ul{
    margin-left: 45px;
    padding-left: 0;
    border-left: 1px solid #c4cbdb;
}
.autoc li {
    padding-left: 20px;
    list-style: none;
    margin-bottom: 0px;
}
.autoc .autoc-level-H3{
    padding-left: 40px;
}
.autoc .autoc-level-H4{
    padding-left: 60px;
}
.autoc .autoc-level-H2:before{
    content: "";
    display: block;
    height: 0;
    width: 8px;
    border-bottom: 1px dashed #c4cbdb;
    /* Adjust the Y value for your site */
    transform: translateX(-15px) translateY(19px);
}
.autoc .autoc-level-H3:before{
    content: "";
    display: block;
    height: 0;
    width: 30px;
    border-bottom: 1px dashed #c4cbdb;
    /* Adjust the Y value for your site */
    transform: translateX(-35px) translateY(19px);
}
.autoc .autoc-level-H4:before{
    content: "";
    display: block;
    height: 0;
    width: 50px;
    border-bottom: 1px dashed #c4cbdb;
    /* Adjust the Y value for your site */
    transform: translateX(-55px) translateY(19px);
}
@media(max-width: 767px) {
    .autoc ul{
        margin-left: 0;
    }
    .autoc .autoc-level-H2:before,
    .autoc .autoc-level-H3:before,
    .autoc .autoc-level-H4:before{
        /* Adjust the margin-top value for your site */
        margin-top: -3px;
        position: absolute;
    }
}

Единственной проблемой здесь было оформить неупорядоченный список, не похожий на наши обычные списки. Тем не менее, вам нужно настроить некоторые значения для вашей конкретной ситуации. Те, которые требуют вашего внимания, имеют над ними комментарий, они зависят от размера шрифта и соответствуют вертикальной позиции пунктирной линии. Мы определяем стили только для уровней h2-h3-h4. Поскольку h1 является заголовком статьи, и мы не используем h5-h6, и даже если бы мы использовали, мы не хотим, чтобы они были в оглавлении.

Добавление автоматического оглавления на ваш сайт

Ознакомьтесь с этими методами добавления фрагментов PHP-кода в WordPress. CSS входит в вашу дочернюю тему, но в нативном настройщике тоже есть место. Надеюсь, у вашей дочерней темы уже есть файл custom.js для JS, но если нет, вы можете создать его и затем загрузить через PHP:

function custom_scripts() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri().'/custom.js',
        array('jquery'),
        false,
        true
    );
}
add_action('wp_enqueue_scripts', 'custom_scripts');

 Дайте нам знать, если это полезное дополнение к нашему или вашему сайту!

Источник записи: https://letswp.io