Jak dodać niestandardowe szablony i projekt do formatów postów na blogu Divi (część 2 z 3)
Opublikowany: 2017-05-03Witamy w dniu 2 z 3 w naszej serii na temat dodawania niestandardowych stylów do formatów postów na blogu Divi. Domyślnie Divi zawiera sześć formatów postów na blogu: Standardowy, Wideo, Audio, Cytat, Galeria i Link. W tej serii nauczymy Cię, jak dostosować je za pomocą php i css.
Wczoraj przedstawiłem Ci, jak używać Desktopserver do tworzenia lokalnej instalacji WordPressa. Pokazałem też, jak ustawić motyw potomny. Oba te elementy są świetną podstawą każdego projektu, nad którym pracujesz i są idealne do tego, co zamierzamy robić dziś i jutro.
Dzisiaj zamierzamy edytować kod PHP w pliku single.php Divi, aby uzyskać całkowicie unikalny układ dla formatów postów na blogu. Jeśli nie znasz jeszcze PHP, nie martw się. To niewiele i nie jest to trudne. Przeprowadzę Cię dokładnie, jakiego kodu potrzebujesz i gdzie go umieścić.
Po wyedytowaniu naszego pliku single.php, w końcu będziemy gotowi na ostatnią część naszej serii. Jutro chodzi o stylizację i sprawdzenie, jak fajne formaty postów na blogu mogą wyglądać na Twoim blogu.
Zacznijmy.
Czego potrzebujesz do tego samouczka
Oto, co musisz śledzić wraz z dzisiejszym samouczkiem:
- Edytor kodu, taki jak Atom, Sublime, Brackets lub Notepad + + (jak wolisz)
- Lokalna instalacja WordPress (najnowsza wersja) przy użyciu DesktopServer (chyba że już masz)
- Zainstalowany i aktywny motyw Divi Child z trzema plikami dodanymi z wczorajszego posta (style.css, functions.php i single.php)
Dostosowywanie szablonu Single.php Divi
Dodawanie nowej sekcji bohatera
Za pomocą edytora tekstu otwórz plik single.php motywu podrzędnego. Upewnij się, że skopiowałeś cały kod single.php z motywu nadrzędnego (Divi) wraz ze swoim plikiem.
W górnej części pliku znajdź otwierający div z identyfikatorem „main-content”.
<div id=”main-content”>
Następnie wprowadź następujące informacje tuż pod elementem otwierającym „główna treść”:
<?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>
Oto, co ten kod robi z twoim plikiem single.php.
Po pierwsze, zmiennej o nazwie „$featured_image_src” przypisywana jest wartość, która „pobiera” źródło obrazu (czyli adres URL do obrazu) dla polecanego obrazu przypisanego do posta.
Następny kod to połączenie html i php, które otwiera nowy div z niestandardową klasą o nazwie „sekcja bohatera” i pewnymi stylami wbudowanymi, aby utworzyć dwa obrazy tła ułożone jeden na drugim.
Pierwszy obraz jest zdefiniowany jako gradient liniowy, który służy jako ciemna nakładka na wyróżniony obraz.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
Drugi obraz (wyróżniony obraz) jest oddzielony przecinkiem i domyślnie układa się za pierwszym obrazem.
url('<?php printf ($featured_image_src[0])?>')
Zdefiniowana wcześniej zmienna Notice służy do ustawienia wyróżnionego obrazu jako tła „sekcji bohatera”.
Ponieważ drugi obraz na liście automatycznie umieszczany jest za pierwszym obrazem, ta kombinacja tworzy ciemną nakładkę na obraz sekcji bohatera.
Teraz za każdym razem, gdy dodasz wyróżniony obraz do swojego posta, ciemna nakładka zostanie automatycznie zastosowana.
Następny fragment kodu dodaje nagłówek do Twojego posta w nowym div-sekcji bohatera.
<h1 class="entry-title"><?php the_title(); ?></h1>
Ostatni fragment kodu dodaje zawartość meta posta pod nagłówkiem i w div sekcji bohatera.
<?php et_divi_post_meta(); ?>
Oto, co ta nowa sekcja i stylizacja pozwoli nam osiągnąć w jutrzejszym poście:
Wyjmowanie tego, czego nie potrzebujesz
Ponieważ masz nową sekcję dla polecanego obrazu, tytułu posta i meta postu, musisz usunąć trzy sekcje kodu, które były używane domyślnie do wyświetlania polecanego obrazu, tytułu posta i meta postu.
Musisz usunąć tag h1, który wyświetla tytuł posta:
<h1 class="entry-title"><?php the_title(); ?></h1>
Będziesz musiał wyjąć kod, który wyświetla meta posta:
<?php et_divi_post_meta(); ?>
Będziesz musiał wyjąć kod i wyświetlić miniaturę polecanego obrazu:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Oto cały kod nowego pliku single.php. Jeśli utkniesz, możesz go skopiować i wkleić.
Uwaga: to jest przewijane pole kodu. Musisz wybrać i przeciągnąć, aby uzyskać to wszystko.
<?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(); ?>
To tyle na dziś!
Teraz cała ciężka praca jest już skończona, a framework jest gotowy, abyśmy mogli dodać naszą stylizację do naszych formatów postów. Jutro będę konfigurować i stylizować wszystkie 6 formatów postów na blogu, korzystając z szablonu single.php, który właśnie stworzyliśmy.
Zamieszczaj swoje komentarze poniżej, a postaram się jak najlepiej rozwiązać wszelkie problemy, które możesz mieć. Jeśli to możliwe, upewnij się, że masz świeżą instalację najnowszej wersji WordPress i Divi, aby uniknąć potencjalnych konfliktów.
Do jutra!