So fügen Sie benutzerdefinierte Vorlagen und Designs zu den Blog-Post-Formaten von Divi hinzu (Teil 2 von 3)
Veröffentlicht: 2017-05-03Willkommen zu Tag 2 von 3 unserer Serie zum Hinzufügen von benutzerdefinierten Stilen zu Divis Blog-Post-Formaten. Standardmäßig wird Divi mit sechs Blog-Post-Formaten geliefert: Standard, Video, Audio, Zitat, Galerie und Link. In dieser Serie bringen wir Ihnen bei, wie Sie diese mit PHP und CSS anpassen können.
Gestern habe ich Sie durch die Verwendung von Desktopserver geführt, um eine lokale Installation von WordPress zu erstellen. Ich habe Ihnen auch gezeigt, wie Sie ein Child-Theme einrichten. Beides ist eine großartige Grundlage für jedes Projekt, an dem Sie arbeiten, und es ist perfekt für das, was wir heute und morgen tun werden.
Heute werden wir etwas PHP-Code in Divis single.php-Datei bearbeiten, um ein völlig einzigartiges Layout für Ihre Blog-Post-Formate zu erhalten. Wenn Sie mit PHP noch nicht vertraut sind, machen Sie sich keine Sorgen. Es ist nicht viel und es ist nicht schwer zu tun. Ich werde Ihnen genau erklären, welchen Code Sie benötigen und wo Sie ihn einfügen.
Nachdem wir unsere single.php-Datei bearbeitet haben, sind wir endlich bereit für unseren letzten Teil unserer Serie. Morgen dreht sich alles darum, zu stylen und herauszufinden, wie coole Blog-Post-Formate auf Ihrem Blog aussehen können.
Lass uns anfangen.
Was Sie für dieses Tutorial benötigen
Hier ist, was Sie zusammen mit dem heutigen Tutorial befolgen müssen:
- Ein Code-Editor wie Atom, Sublime, Brackets oder Notepad++ (was auch immer Sie bevorzugen)
- Eine lokale WordPress-Installation (neueste Version) mit DesktopServer (sofern Sie nicht bereits einen haben)
- Ein installiertes und aktives Divi Child Theme mit drei Dateien, die aus dem gestrigen Beitrag hinzugefügt wurden (style.css,functions.php und single.php)
Anpassen der Single.php-Vorlage von Divi
Hinzufügen eines neuen Heldenabschnitts
Öffnen Sie mit Ihrem Texteditor die Datei single.php Ihres Child-Themes. Stellen Sie sicher, dass Sie den gesamten single.php-Code aus dem Parent-Theme (Divi) mit Ihrer Datei kopiert haben.
Suchen Sie oben in der Datei das öffnende div mit der ID "main-content".
<div id=”main-content”>
Geben Sie dann Folgendes direkt unter dem Eröffnungs-Div „main-content“ ein:
<?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>
Hier ist, was dieser Code mit Ihrer single.php-Datei macht.
Zuerst wird einer Variablen namens „$featured_image_src“ ein Wert zugewiesen, der die Bildquelle (die URL des Bildes) für das dem Beitrag zugewiesene vorgestellte Bild „holt“.
Der nächste Code ist eine Kombination aus HTML und PHP, die das neue div mit einer benutzerdefinierten Klasse namens „hero-section“ und etwas Inline-Styling öffnet, um zwei übereinander gestapelte Hintergrundbilder zu erstellen.
Das erste Bild ist als linearer Gradient definiert, der als dunkle Überlagerung für das vorgestellte Bild dient.
Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))
Und das zweite Bild (das vorgestellte Bild) wird durch ein Komma getrennt und standardmäßig hinter dem ersten Bild gestapelt.
url('<?php printf ($featured_image_src[0])?>')
Die zuvor definierte Hinweisvariable wird verwendet, um das vorgestellte Bild als Hintergrund des „Heldenabschnitts“ festzulegen.
Da das zweite aufgelistete Bild automatisch hinter dem ersten Bild gestapelt wird, erstellt diese Kombination die dunkle Überlagerung über dem Bild des Heldenabschnitts.
Jedes Mal, wenn Sie Ihrem Beitrag ein vorgestelltes Bild hinzufügen, wird automatisch eine dunkle Überlagerung angewendet.
Das nächste Code-Snippet fügt die Überschrift für Ihren Beitrag in Ihr neues Div.
<h1 class="entry-title"><?php the_title(); ?></h1>
Das letzte Code-Snippet fügt den Post-Meta-Inhalt unter der Überschrift und innerhalb des Heldenabschnitts-Divs hinzu.
<?php et_divi_post_meta(); ?>
Folgendes wird uns dieser neue Abschnitt und das Styling im morgigen Beitrag ermöglichen:
Nehmen Sie heraus, was Sie nicht brauchen
Da Sie einen neuen Abschnitt für Ihr Beitragsbild, den Beitragstitel und die Beitragsmeta eingerichtet haben, müssen Sie drei Codeabschnitte entfernen, die standardmäßig verwendet wurden, um Ihr Beitragsbild, den Beitragstitel und die Beitragsmeta anzuzeigen.
Sie müssen das h1-Tag entfernen, das den Beitragstitel anzeigt:
<h1 class="entry-title"><?php the_title(); ?></h1>
Sie müssen den Code entfernen, der das Post-Meta anzeigt:
<?php et_divi_post_meta(); ?>
Und Sie müssen den Code herausnehmen und die Miniaturansicht des vorgestellten Bildes anzeigen:
print_thumbnail( $thumb, //$thumbnail["use_timthumb"], $titletext, //$width, $height );
Hier ist der gesamte Code für die neue single.php-Datei. Fühlen Sie sich frei, es zu kopieren und einzufügen, wenn Sie nicht weiterkommen.
Hinweis: Dies ist ein scrollender Codekasten. Sie müssen auswählen und ziehen, um alles zu erhalten.
<?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(); ?>
Das war `s für heute!
Jetzt ist die harte Arbeit erledigt und das Framework ist bereit für uns, unser Styling zu unseren Post-Formaten hinzuzufügen. Morgen werde ich alle 6 Blogpost-Formate mit dem soeben erstellten single.php-Template einrichten und gestalten.
Bitte posten Sie Ihre Kommentare unten und ich werde mein Bestes geben, um alle Probleme zu lösen, die Sie möglicherweise haben. Stellen Sie nach Möglichkeit sicher, dass Sie die neueste Version von WordPress und Divi neu installiert haben, um potenzielle Konflikte zu vermeiden.
Bis morgen!