カスタムテンプレートとデザインをDiviのブログ投稿フォーマットに追加する方法(パート2/3)

公開: 2017-05-03

Diviのブログ投稿フォーマットにカスタムスタイルを追加する方法に関するシリーズの3日目の2日目へようこそ。 デフォルトでは、Diviには、標準、ビデオ、オーディオ、見積もり、ギャラリー、リンクの6つのブログ投稿形式が付属しています。 このシリーズでは、phpとcssを使用してそれらをカスタマイズする方法を説明します。


昨日、Desktopserverを使用してWordPressのローカルインストールを作成する方法について説明しました。 また、子テーマの設定方法も示しました。 これらは両方とも、あなたが取り組んでいるプロジェクトの素晴らしい基盤であり、今日と明日私たちがやろうとしていることに最適です。

今日は、ブログ投稿形式の完全にユニークなレイアウトを取得するために、Diviのsingle.phpファイル内のいくつかのPHPコードを編集します。 PHPにまだ慣れていない場合でも、心配はいりません。 それほど多くはなく、難しいことでもありません。 必要なコードとその配置場所について正確に説明します。

single.phpファイルを編集したら、シリーズの最後のパートの準備が整います。 明日は、スタイリングと、ブログの投稿フォーマットがブログでどのように見えるかを知ることです。

始めましょう。

このチュートリアルに必要なもの

今日のチュートリアルに沿って従う必要があるものは次のとおりです。

  • Atom、Sublime、Brackets、Notepadなどのコードエディター+ +(お好みのもの)
  • DesktopServerを使用したローカルWordPressインストール(最新バージョン)(既にお持ちでない場合)
  • 昨日の投稿から追加された3つのファイル(style.css、functions.php、およびsingle.php)がインストールされ、アクティブになっているDivi子テーマ

DiviのSingle.phpテンプレートのカスタマイズ

新しいヒーローセクションの追加

テキストエディタを使用して、子テーマのsingle.phpファイルを開きます。 親テーマ(Divi)からすべてのsingle.phpコードをファイルとともにコピーしたことを確認してください。

ファイルの先頭で、IDが「main-content」の開始divを見つけます。

<div id=”main-content”>

次に、「メインコンテンツ」の開始divのすぐ下に次のように入力します。

<?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ファイルに対して行っていることは次のとおりです。

まず、「$ featured_image_src」という変数に、投稿に割り当てられた注目画像の画像ソース(画像のURL)を「取得」する値が割り当てられます。

次のコードは、htmlとphpの組み合わせで、「hero-section」と呼ばれるカスタムクラスといくつかのインラインスタイルで新しいdivを開き、2つの背景画像を積み重ねて作成します。

最初の画像は、注目画像の暗いオーバーレイとして機能する線形グラデーションとして定義されます。

Linear-gradient (rgba(0,0,0,0.3), rgba(,0,0,0,0.3))

また、2番目の画像(注目の画像)はカンマで区切られ、デフォルトでは最初の画像の後ろにスタックされます。

url('<?php printf ($featured_image_src[0])?>')

前に定義した変数は、注目の画像を「ヒーローセクション」の背景として設定するために使用されます。

リストされている2番目の画像は最初の画像の後ろに自動的にスタックするため、この組み合わせにより、ヒーローセクションの画像の上に暗いオーバーレイが作成されます。

これで、注目の画像を投稿に追加するたびに、暗いオーバーレイが自動的に適用されます。

次のコードスニペットは、新しいヒーローセクションdiv内に投稿の見出しを追加します。

<h1 class="entry-title"><?php the_title(); ?></h1>

コードの最後のスニペットは、見出しの下とヒーローセクションのdiv内に投稿メタコンテンツを追加します。

<?php et_divi_post_meta(); ?>

この新しいセクションとスタイリングにより、明日の投稿で達成できることは次のとおりです。

不要なものを取り出す

注目の画像、投稿のタイトル、投稿のメタの新しいセクションが配置されているため、デフォルトで注目の画像、投稿のタイトル、投稿のメタを表示するために使用されていたコードの3つのセクションを削除する必要があります。

投稿のタイトルを表示する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(); ?>

今日は以上です!

これでハードワークはすべて完了し、フレームワークで投稿フォーマットにスタイルを追加する準備が整いました。 明日は、作成したsingle.phpテンプレートを使用して、6つのブログ投稿形式すべてを設定およびスタイル設定します。

以下にコメントを投稿してください。問題が発生した場合は、できる限り対処します。 可能であれば、潜在的な競合を避けるために、WordPressとDiviの最新バージョンを新規インストールしていることを確認してください。

明日まで!