Как добавить собственные шаблоны и дизайн в форматы сообщений в блогах Divi (часть 2 из 3)
Опубликовано: 2017-05-03Добро пожаловать в день 2 из 3 нашей серии статей о том, как добавлять собственные стили в форматы сообщений в блогах Divi. По умолчанию Divi поставляется с шестью форматами сообщений в блогах: Standard, Video, Audio, Quote, Gallery и Link. В этой серии мы научим вас настраивать их с помощью php и css.
Вчера я рассказал вам, как использовать Desktopserver для создания локальной установки WordPress. Я также показал вам, как создать дочернюю тему. Оба они являются отличной основой для любого проекта, над которым вы работаете, и идеально подходят для того, что мы собираемся делать сегодня и завтра.
Сегодня мы собираемся отредактировать некоторый PHP-код в файле single.php Divi, чтобы получить совершенно уникальный макет для форматов сообщений вашего блога. Если вы еще не знакомы с PHP, не беспокойтесь. Это не так уж и много, и сделать это несложно. Я расскажу, какой именно код вам нужен и где его разместить.
После того, как мы отредактируем наш файл single.php, мы, наконец, будем готовы к нашей последней части нашей серии. Завтра все будет посвящено стилизации и выяснению того, насколько крутые форматы сообщений могут выглядеть в вашем блоге.
Давайте начнем.
Что вам понадобится для этого урока
Вот что вам нужно будет выполнить вместе с сегодняшним руководством:
- Редактор кода, такой как Atom, Sublime, Brackets или Notepad + + (что вам больше нравится)
- Локальная установка WordPress (последняя версия) с использованием DesktopServer (если она у вас еще не установлена)
- Установлена и активна дочерняя тема Divi с тремя файлами, добавленными из вчерашнего сообщения (style.css, functions.php и single.php)
Настройка шаблона Divi Single.php
Добавление нового раздела героя
В текстовом редакторе откройте файл single.php дочерней темы. Убедитесь, что вы скопировали весь код single.php из родительской темы (Divi) с вашим файлом.
Вверху файла найдите открывающий div с идентификатором «main-content».
<div id=”main-content”>
Затем введите следующее сразу под открывающим div «main-content»:
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>
Вот что этот код делает с вашим файлом single.php.
Во-первых, переменной с именем «$ Feature_image_src» присваивается значение, которое «получает» источник изображения (который является URL-адресом изображения) для избранного изображения, назначенного публикации.
Следующий код представляет собой комбинацию html и php, которая открывает новый div с настраиваемым классом под названием «hero-section» и некоторым встроенным стилем для создания двух фоновых изображений, наложенных друг на друга.
Первое изображение определяется как linear-gradient, которое служит темным наложением для избранного изображения.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
А второе изображение (рекомендуемое изображение) разделяется запятой и по умолчанию располагается позади первого изображения.
url('<?php printf ($featured_image_src[0])?>')
Переменная Notice, определенная ранее, используется для установки избранного изображения в качестве фона «секции героя».
Поскольку второе изображение в списке автоматически накладывается на первое изображение, эта комбинация создает темное наложение поверх изображения главного раздела.
Теперь, когда вы добавляете изображение в свой пост, автоматически применяется темный оверлей.
Следующий фрагмент кода добавляет заголовок вашего сообщения в новый div-раздел hero-section.
<h1 class="entry-title"><?php the_title(); ?></h1>
Последний фрагмент кода добавляет мета-контент поста под заголовком и в div hero-section.
<?php et_divi_post_meta(); ?>
Вот то, что этот новый раздел и стиль позволят нам добиться в завтрашнем посте:
Убирая то, что вам не нужно
Поскольку у вас есть новый раздел для избранного изображения, заголовка публикации и мета публикации, вам необходимо удалить три раздела кода, которые использовались для отображения вашего избранного изображения, заголовка публикации и мета публикации по умолчанию.
Вам нужно будет вынуть тег h1, который отображает заголовок сообщения:
<h1 class="entry-title"><?php the_title(); ?></h1>
Вам нужно будет вынуть код, отображающий мета поста:
<?php et_divi_post_meta(); ?>
И вам нужно будет вынуть код и отобразить миниатюру избранного изображения:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Вот полный код нового файла single.php. Не стесняйтесь копировать и вставлять его, если вы застряли.
Примечание. Это поле для прокрутки кода. Вам нужно будет выбрать и перетащить, чтобы получить все это.
<?php
get_header();
$show_default_title = get_post_meta( get_the_ID(), '_et_pb_show_title', true );
$is_page_builder_used = et_pb_is_pagebuilder_used( get_the_ID() );
?>
<div id="main-content">
<?php $featured_image_src = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' ); ?>
<div class="hero-section" style="background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.3)), url('<?php printf ($featured_image_src[0])?>');">
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php et_divi_post_meta(); ?>
</div>
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<?php while ( have_posts() ) : the_post(); ?>
<?php if (et_get_option('divi_integration_single_top') <> '' && et_get_option('divi_integrate_singletop_enable') == 'on') echo(et_get_option('divi_integration_single_top')); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class( 'et_pb_post' ); ?>>
<?php if ( ( 'off' !== $show_default_title && $is_page_builder_used ) || ! $is_page_builder_used ) { ?>
<div class="et_post_meta_wrapper">
<!-- h1 was here -->
<?php
if ( ! post_password_required() ) :
//et_divi_post_meta();
$thumb = '';
$width = (int) apply_filters( 'et_pb_index_blog_image_width', 1080 );
$height = (int) apply_filters( 'et_pb_index_blog_image_height', 675 );
$classtext = 'et_featured_image';
$titletext = get_the_title();
$thumbnail = get_thumbnail( $width, $height, $classtext, $titletext, $titletext, false, 'Blogimage' );
$thumb = $thumbnail["thumb"];
$post_format = et_pb_post_format();
if ( 'video' === $post_format && false !== ( $first_video = et_get_first_video() ) ) {
printf(
'<div class="et_main_video_container">
%1$s
</div>',
$first_video
);
} else if ( ! in_array( $post_format, array( 'gallery', 'link', 'quote' ) ) && 'on' === et_get_option( 'divi_thumbnails', 'on' ) && '' !== $thumb ) {
} else if ( 'gallery' === $post_format ) {
et_pb_gallery_images();
}
?>
<?php
$text_color_class = et_divi_get_post_text_color();
$inline_style = et_divi_get_post_bg_inline_style();
switch ( $post_format ) {
case 'audio' :
printf(
'<div class="et_audio_content%1$s"%2$s>
%3$s
</div>',
esc_attr( $text_color_class ),
$inline_style,
et_pb_get_audio_player()
);
break;
case 'quote' :
printf(
'<div class="et_quote_content%2$s"%3$s>
%1$s
</div> <!-- .et_quote_content -->',
et_get_blockquote_in_content(),
esc_attr( $text_color_class ),
$inline_style
);
break;
case 'link' :
printf(
'<div class="et_link_content%3$s"%4$s>
<a href="%1$s" class="et_link_main_url">%2$s</a>
</div> <!-- .et_link_content -->',
esc_url( et_get_link_url() ),
esc_html( et_get_link_url() ),
esc_attr( $text_color_class ),
$inline_style
);
break;
}
endif;
?>
</div> <!-- .et_post_meta_wrapper -->
<?php } ?>
<div class="entry-content">
<?php
do_action( 'et_before_content' );
the_content();
wp_link_pages( array( 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'Divi' ), 'after' => '</div>' ) );
?>
</div> <!-- .entry-content -->
<div class="et_post_meta_wrapper">
<?php
if ( et_get_option('divi_468_enable') == 'on' ){
echo '<div class="et-single-post-ad">';
if ( et_get_option('divi_468_adsense') <> '' ) echo( et_get_option('divi_468_adsense') );
else { ?>
<a href="<?php echo esc_url(et_get_option('divi_468_url')); ?>"><img src="<?php echo esc_attr(et_get_option('divi_468_image')); ?>" alt="468" class="foursixeight" /></a>
<?php }
echo '</div> <!-- .et-single-post-ad -->';
}
?>
<?php if (et_get_option('divi_integration_single_bottom') <> '' && et_get_option('divi_integrate_singlebottom_enable') == 'on') echo(et_get_option('divi_integration_single_bottom')); ?>
<?php
if ( ( comments_open() || get_comments_number() ) && 'on' == et_get_option( 'divi_show_postcomments', 'on' ) ) {
comments_template( '', true );
}
?>
</div> <!-- .et_post_meta_wrapper -->
</article> <!-- .et_pb_post -->
<?php endwhile; ?>
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>
На сегодня все!
Теперь вся тяжелая работа сделана, и фреймворк готов для того, чтобы мы могли добавить наш стиль в наши форматы сообщений. Завтра я буду настраивать и стилизовать все 6 форматов сообщений в блогах, используя только что созданный шаблон single.php.
Пожалуйста, оставьте свои комментарии ниже, и я сделаю все возможное, чтобы решить любые проблемы, которые могут у вас возникнуть. Если возможно, убедитесь, что у вас свежая установка последней версии WordPress и Divi, чтобы избежать возможных конфликтов.
До завтра!