Как мне добавить изображение в меню после первого абзаца в the_content?

Вопрос или проблема

Моя проблема:

Я пытаюсь создать фильтр, который добавит изображение записи в the_content, чтобы я мог показать первый абзац the_content перед этим изображением.

Что я, в общем, хочу достичь:

<p>Первый абзац the_content</p>
<img>Изображение записи</img>
<p>Остальная часть the_content</p>

Если кто-то сможет мне помочь.

Заранее спасибо!

Вы можете сделать это, используя фильтр ‘the_content’:

add_filter( 'the_content', 'insert_featured_image', 20 );

function insert_featured_image( $content ) {

    $content = preg_replace( "/<\/p>/", "</p>" . get_the_post_thumbnail($post->ID, 'post-single'), $content, 1 );
    return $content;
}

Конечно, вы можете добавить параметры в функцию the_post_thumbnail(), чтобы определить, какой размер миниатюры вы хотите использовать и т. д. http://codex.wordpress.org/Function_Reference/the_post_thumbnail

С технической точки зрения, самое быстрое решение – использовать шорткод в вашем контенте. В противном случае вам нужно будет хорошо разбираться в регулярных выражениях, чтобы вставить изображение между абзацами с помощью фильтра.

Лучший способ – добавить это в functions.php

<?php 

function featured_image($post) {
    if (has_post_thumbnail($post->id))
        the_post_thumbnail('large');
}

add_shortcode('featured_image', 'featured_image');
?>

После вашего первого абзаца в контенте просто введите [featured_image].

Примечание –

С использованием какого-либо регулярного выражения вы можете сделать это. Вот одно из них. Просто вставьте этот фрагмент в файл functions.php вашей темы, чтобы он выводил содержимое переменной $img сразу после первого абзаца (т.е. после первого вхождения тега </p>) в контенте вашего поста.

Передача текущего значения миниатюры / изображения записи в $img выведет это изображение после первого абзаца.

// Вставляется в файл functions.php
// Добавляет содержимое $img после первого абзаца (т.е. после первого тега `</p>`)
add_filter('the_content', function($content)
{
   $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
   $img = '<img src="'.$url.'" alt="" title=""/>';
   $content = preg_replace('#(<p>.*?</p>)#','$1'.$img, $content, 1);
   return $content;
});

Модифицировано это, чтобы добавить переменную после первого абзаца.

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

Для использования: добавьте следующие два фрагмента в functions.php и измените цифры, где указано, чтобы контролировать количество абзацев.

// Добавляет $featured_img и $caption после n абзаца

add_filter( 'the_content', 'insert_featured_image' );

function insert_featured_image( $content ) {
if ( has_post_thumbnail($post->ID) ) {
        if ( has_post_thumbnail($post->ID) ) {
            $caption = get_the_post_thumbnail_caption( $post );
        } else {
            $caption = '';
        }
    $featured_image="<div>" . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';

    if ( is_single() && ! is_admin() ) {
        return prefix_insert_after_paragraph( $featured_image, 2, $content ); // Число здесь контролирует количество абзацев. Настройте его под свои нужды
    }
}

return $content;
}

// Родительская функция

function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) 
{
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {

    if ( trim( $paragraph ) ) {
        $paragraphs[$index] .= $closing_p;
    }

    if ( $paragraph_id == $index + 1 ) {
        $paragraphs[$index] .= $insertion;
    }
}

return implode( '', $paragraphs );
}

Это простой процесс для выполнения. Следуйте простым шагам.

  • Войдите на свой сайт и перейдите в панель управления WordPress.
  • Перейдите в Внешний вид>Редактор файлов темы>Функции темы (functions.php)
  • Вставьте этот код.
// Добавляет $featured_img и $caption после n абзаца

add_filter( 'the_content', 'insert_featured_image' );

function insert_featured_image( $content ) {
    if ( has_post_thumbnail($post->ID) ) {
            if ( has_post_thumbnail($post->ID) ) {
                }
        $featured_image="<div>" . get_the_post_thumbnail( $post->ID, 'full' ) . '</div>'.'<div>' . $caption . '</div>';
    if ( is_single() && ! is_admin() ) {
            return prefix_insert_after_paragraph( $featured_image, 2, $content ); // Число здесь контролирует количество абзацев. Настройте его под свои нужды
        }
    }

    return $content;
}

    // Родительская функция

function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) 
{
    $closing_p = '</p>';
    $paragraphs = explode( $closing_p, $content );
    foreach ($paragraphs as $index => $paragraph) {

        if ( trim( $paragraph ) ) {
            $paragraphs[$index] .= $closing_p;
        }

        if ( $paragraph_id == $index + 1 ) {
            $paragraphs[$index] .= $insertion;
        }
    }

    return implode( '', $paragraphs );
}

.

Ответ или решение

Чтобы добавить изображение (миниатюру) записи в content после первого абзаца, вы можете воспользоваться фильтром the_content в WordPress. Эта задача может быть выполнена с помощью кода, который добавляется в файл functions.php вашей темы.

Шаги для достижения цели:

  1. Откройте файл functions.php вашей темы. Для этого выполните вход в админ-панель WordPress, перейдите в раздел "Внешний вид" > "Редактор тем" и выберите файл functions.php.

  2. Добавьте следующий код: Этот код проверяет, есть ли у записи миниатюра, и если она есть, вставляет её после первого абзаца контента.

// Добавляет миниатюру после первого абзаца в контенте записи
add_filter('the_content', 'insert_featured_image');

function insert_featured_image($content) {
    global $post; // Делаем доступной глобальную переменную поста

    // Проверяем наличие миниатюры
    if (has_post_thumbnail($post->ID)) {
        // Получаем HTML-код миниатюры
        $thumbnail = get_the_post_thumbnail($post->ID, 'full'); 

        // Определяем, является ли текущая страница одиночным постом
        if (is_single() && !is_admin()) {
            // Вставляем миниатюру после первого абзаца
            return insert_after_paragraph($thumbnail, 1, $content); 
        }
    }
    return $content; // Возвращаем контент без изменений, если условия не выполнены
}

// Функция для вставки контента после определённого абзаца
function insert_after_paragraph($insertion, $paragraph_id, $content) {
    $paragraphs = explode('</p>', $content); // Разделяем контент на абзацы
    foreach ($paragraphs as $index => $paragraph) {
        if (trim($paragraph)) {
            $paragraphs[$index] .= '</p>'; // Добавляем закрывающий тег
        }

        if ($paragraph_id == $index + 1) {
            $paragraphs[$index] .= $insertion; // Вставляем миниатюру
        }
    }
    return implode('', $paragraphs); // Объединяем абзацы обратно в один контент
}

Как работает этот код:

  • Фильтр the_content: Функция add_filter добавляет наш пользовательский фильтр insert_featured_image к контенту.

  • Проверка миниатюры: Сначала проверяется, имеет ли пост миниатюру с помощью функции has_post_thumbnail().

  • Получение миниатюры: Если миниатюра есть, то с помощью функции get_the_post_thumbnail() получаем её HTML.

  • Вставка миниатюры: Затем вызываем функцию insert_after_paragraph, которая вставляет миниатюру после первого абзаца.

  • Работа с абзацами: Контент разбивается на абзацы, и после нужного абзаца вставляется HTML-код миниатюры.

Рекомендации по тестированию:

  • Создайте резервную копию: Перед внесением изменений в functions.php рекомендуется создать резервную копию файла на случай, если произойдут ошибки.

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

Заключение:

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

Оцените материал
Добавить комментарий

Капча загружается...