Как переопределить HTML-коды в WordPress?

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

<article id="post-<?php the_ID(); ?>" <?php post_class( array('list-article', 'clearfix') ); ?>>

<div class="list-article-thumb">
    <a href="https://wordpress.stackexchange.com/questions/306742/<?php echo esc_url( get_permalink() ); ?>">
        <?php
        if ( has_post_thumbnail( ) ) {
            the_post_thumbnail( 'onepress-blog-small' );
        } else {
            echo '<img alt="" src="'. get_template_directory_uri() . '/assets/images/placholder2.png' .'">';
        }
        ?>
    </a>
</div>

<div class="list-article-content">
    <div class="list-article-meta">
        <?php the_category("https://wordpress.stackexchange.com/"); ?>
    </div>
    <header class="entry-header">
        <?php the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' ); ?>
    </header><!-- .entry-header -->
    <div class="entry-excerpt">
        <?php
            the_excerpt();
        ?>
        <?php
            wp_link_pages( array(
                'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'onepress' ),
                'after'  => '</div>',
            ) );
        ?>
    </div><!-- .entry-content -->
</div>

<div class="list-article-content">
</div>

.

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

Для того чтобы переопределить HTML-коды в WordPress, не редактируя родительскую тему, необходимо использовать подход с созданием дочерней темы и расположением необходимых файлов в соответствующей структуре. В данном случае вы хотите изменить содержимое в разделе <div class="list-article-content"> в одном из шаблонов вашей темы. Давайте разберем, как это сделать шаг за шагом.

Шаги по переопределению HTML-кодов в WordPress

1. Создание дочерней темы:

   • Если у вас еще нет дочерней темы, создайте новую папку в директории wp-content/themes/ и дайте ей название, например, yourtheme-child.
   • В этой папке создайте файл style.css, добавив в него следующую информацию:

     /*
     Theme Name: YourTheme Child
     Template: yourtheme
     */

   • Затем создайте файл functions.php, который будет загружать стили родительской темы:

     <?php
     function yourtheme_child_enqueue_styles() {
      wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
     }
     add_action('wp_enqueue_scripts', 'yourtheme_child_enqueue_styles');

2. Копирование файла шаблона:

   • Найдите файл шаблона (например, content.php или аналогичный), в котором содержится код HTML, который вы хотите изменить.
   • Скопируйте этот файл в папку дочерней темы. Например, поместите его в wp-content/themes/yourtheme-child/template-parts/content.php.

3. Редактирование файла в дочерней теме:

   • Откройте скопированный файл и отредактируйте раздел <div class="list-article-content"> так, как вам необходимо.
   • Убедитесь, что в этом разделе у вас есть любые условные операторы, которые могут помочь избежать дублирования или пропуска контента, например:

     <div class="list-article-content">
      <?php if ( !function_exists('your_function_name') ) : ?>
          <p>Ваш новый HTML-код здесь</p>
      <?php endif; ?>
     </div>

4. Загрузка изменений:

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

Устранение проблем с дублированием

Если при попытке переопределить файл вы столкнулись с дублированием кода, убедитесь, что вы:

• Не просто копируете код в functions.php, а именно переопределяете нужный файл шаблона.
• Правильно указали имя функции, которая генерирует содержимое (если таковая существует) и используете условные операторы для управления отображением.

Заключение

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