みなさんこんにちは！
WordPressでの自作テーマを作成する工程3回目はトップページを作ります！
前回までは、wordpressでの開発環境の構築を行い、自作テーマ開発に欠かせないスターターテーマの準備、私が用意したHTML,CSS,JavaScriptファイルのダウンロードしていただきました。
前回までの記事をまだみてない方は以下のリンクからどうぞ↓
【Wordpress自作テーマ開発②】自作テーマ開発を効率的に行う為の準備編
それでは本題に早速取り掛かりましょう！
このトップページ編は少し長くなりますが、自作テーマ開発には欠かせない知識を詰め込みましたのでぜひ最後までご覧ください。
トップページを作るために必要なこと
まずは、現在の＿s（UnderScores）ダウンロードしてすぐのトップページの表示を確認したいと思います。
このトップページですが、_ｓ(underscores)テーマ内の「index.php」というファイルが出力しています。
WordPressでは、各ページによって異なるファイルを呼び出しそれぞれのファイルの記述によってページを出力しています。
またヘッダー、フッター、サイドバーなどの各ページでも同じデザインや機能の部分をパーツに分け、index.phpに呼び出しをすることによって現在のトップページが出力されているのです。
（これによって、何かサイトの機能、デザインを編集するときに、１箇所編集すれば全てのページに反映されるなど、とても便利なのです！）
上記のことを踏まえてもう一度トップページを見てみます。以下をご覧ください。
画像のように、ヘッダー、コンテンツ、サイドバー、フッターと分かれています。
それぞれを出力しているindex.phpのコードを見てみます。
コード内にコメントを入れておりますのでそちらも合わせて見てください。
<?php
/**
* The main template file
*
* This is the most generic template file in a WordPress theme
* and one of the two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* E.g., it puts together the home page when no home.php file exists.
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package BlogCreateChallenge
*/
get_header();//header.phpを呼び出す（ヘッダー出力）
?>
<!--コンテンツ部分の出力-->
<main id="primary" class="site-main">
<?php
if ( have_posts() ) ://もし投稿があれば記事があれば以下の内容を実行
if ( is_home() && ! is_front_page() ) ://もし、トップページでなければ（投稿ページ、固定投稿ページ）
?>
<header><!--投稿のタイトルをH1タグで出力-->
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) ://投稿があれば「endwehile」までの内容を投稿の数だけ繰り返し処理
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_type() );//template-partsディレクトリ内のcontent.phpを呼び出し
endwhile;//繰り返し処理終了
the_posts_navigation();//ポストナビゲーションを出力（ページネーション）
else ://投稿がなければ以下の内容を実行
get_template_part( 'template-parts/content', 'none' );//template-partsディレクトリ内のcontent-none.phpを呼び出し
endif;//if文終了
?>
</main><!-- #main -->
<!--コンテンツ部分の出力終了-->
<?php
get_sidebar();//sidebar.phpを呼び出し（サイドバー出力）
get_footer();//footer.phpを呼び出し（フッター出力）ヘッダー、コンテンツ、サイドバー、フッターとそれぞれはWordpressの関数によって呼び出されて表示されています。（get_header();、get_sideber();、get_footer();）
そのため
ヘッダーの表示を変えたい場合はheader.phpを編集
コンテンツの表示を変えたい場合は、content.phpを編集
サイドバーの表示を変えたい場合は、sideber.phpを編集
フッターの表示を変えたい場合は、footer.phpを編集
というようにしてテーマの開発を行なっていきます。
今回は予め用意しているHTMLファイルがありますのでそちらを上記のヘッダー、コンテンツ、サイドバー、フッターと分けてそれぞれのPHPファイルにWordpressの記述の規則に沿って移植をしたいと思います。
（HTML,CSS,JavaScriptファイルをWordpressに移植出来れば、どのようなデザインのサイトもコーディングできると、どんなサイトもWordpress化できるということです！wordpressでのウェブサイト制作を仕事にするのであれば結構必須の知識になりますので覚えておいて損はありません。）
では、早速ヘッダーから作成していきましょう。
ヘッダー作成（header.phpを編集）
トップページを出力しているindex.phpの１５行目付近に「get_header();」という記述があります。
この関数によって、header.phpがindex.phpに呼び出されトップページのヘッダーとして出力されていました。
という事で、header.phpを編集し、ヘッダーを作りたいと思います。
_s(UnderScores)のheader.phpの記述を確認
ヘッダーを作るためには、_s(underscores)のheader.phpに書かれている内容を理解する必要がありますので、早速みていきましょう。
コード内にザックリとコード説明のコメントを書いておりますので以下をご覧ください。
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package BlogCreateChallenge
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?><!--functions.php内からheadの中の要素を呼び出す関数-->
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?><!--必須の記述（この記述がないとプラグインが正常に動作しない）-->
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="#primary"><?php esc_html_e( 'Skip to content', 'blogcreatechallenge' ); ?></a><!--トップへスキップする為の記述-->
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
the_custom_logo();//ヘッダーロゴを取得し出力するコード
if ( is_front_page() && is_home() ) ://サイトのトップページであれば
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1><!--サイトタイトルをH1タグで出力-->
<?php
else ://サイトのトップページ以外は
?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p><!--サイトタイトルをPタグで出力-->
<?php
endif;//if文終了
$blogcreatechallenge_description = get_bloginfo( 'description', 'display' );//サイトのキャッチフレーズを取得
if ( $blogcreatechallenge_description || is_customize_preview() ) ://サイトのキャッチフレーズがセットされていれば、
?>
<p class="site-description"><?php echo $blogcreatechallenge_description; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped ?></p><!--サイトキャッチフレーズをPタグで出力-->
<?php endif; ?><!--if文終了-->
</div>
<nav id="site-navigation" class="main-navigation"><!--ヘッダーナビゲーション-->
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'blogcreatechallenge' ); ?></button>
<?php
wp_nav_menu( //ヘッダーナビゲーションを出力するコード
array(
'theme_location' => 'menu-1',
'menu_id' => 'primary-menu',
)
);
?>
</nav><!-- #site-navigation -->
</header><!-- #masthead -->コード量があるように思いますが、実際に出力されているのは、
- サイトロゴ
- サイトタイトル
- サイトキャッチフレーズ
- ヘッダーナビゲーション
以上です。
そぉ考えるととてもシンプルですね。
自前のHTML,CSS,JavaScriptをheader.phpに移植する
まずはヘッダーの完成形を確認します。
では、_s(UnderScores)のheader.phpに自前のHTML、CSS、JavaScript（このファイルは前回の記事にてダウンロード配布しています）を移植していきます。
工程としては、_S(UnderScores)のheader.phpの記述を活かしHTMLのタグの追加、Classの変更がほとんどです。
以下のコードが移植後のheader.phpの記述になります。
<?php
/**
* The header for our theme
*
* This is the template that displays all of the <head> section and everything up until <div id="content">
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package BlogCreateChallenge
*/
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php wp_body_open(); ?>
<div id="page" class="site">
<a class="skip-link screen-reader-text" href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Skip to content', 'blogcreatechallenge' ); ?></a>
<!-- header -->
<header class="ly_header">
<div class="ly_header_inner">
<div class="header-log ">
<?php
if( has_custom_logo() ):
the_custom_logo();
else :
if ( is_front_page() && is_home() ) :
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>**" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
<?php
else :
?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
<?php
endif;
endif;
$blogcreatechallenge_description = get_bloginfo( 'description', 'display' );
if ( $blogcreatechallenge_description || is_customize_preview() ) :
?>
<p class="site-description"><?php echo $blogcreatechallenge_description;?></p>
<?php endif; ?>
</div>
<nav id="site-navigation" class="header-nav">
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_class' => 'pc-nav-list',
'container_class' => 'pc-nav-area',
)
);
?>
<div class="sp-nav">
<div id="hamburger" class="hamburger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
</div>
</header>変更したHTML、CSSについての説明は省き、PHPの変更点についての説明をしていきます。
追記した部分についての説明
●３１行目〜４３行目
<?php
if( has_custom_logo() )://カスタムロゴがセットされていれば、
the_custom_logo();//カスタムロゴを表示
else ://カスタムロゴがセットされていなければ、、
if ( is_front_page() && is_home() ) ://トップページならば、、
?>
<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>**" rel="home"><?php bloginfo( 'name' ); ?></a></h1><!--H1タグでタイトル表示-->
<?php
else ://トップページ以外なら、、
?>
<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p><!--Pタグでタイトル表示-->
<?php
endif;//if文終了
endif;//if文終了デフォルトで用意されていた「the_custom_logo();」をif文で囲みカスタムロゴがあればサイトタイトルよりもカスタムロゴを優先して表示する記述をしました。
●５０〜５９行目
<?php
wp_nav_menu(
array(
'theme_location' => 'menu-1',
'menu_class' => 'pc-nav-list',
'container_class' => 'pc-nav-area',
)
);
?>ヘッダーナビゲーションを出力する「wp_nav_menu」の記述に対しての変更部分は、パラメーターの「’menu_id’ => ‘primary-menu’」という記述を削除し、「’menu_class’ => ‘pc-nav-list’,」、「’container_class’ => ‘pc-nav-area’,」を追記しました。
「wp_nav_menu」には様々なパラメータが用意されており今回の追記のでは、
「’menu_id’ => ‘primary-menu’」の記述の削除ではナビメニューを構成する「ulタグ」に適応された「id」（今回はprimary-menu）の削除を行い、
「’menu_class’ => ‘pc-nav-list’,」を追記しナビメニューを構成する「ulタグ」に「pc-nav-list」というクラスを追加、
「’container_class’ => ‘pc-nav-area’,」を追記しナビメニューをラップする（ナビメニューを囲む）「divタグ」に「pc-nav-area」というクラスを追加しました。
その他様々なパラメータがありますので確認したいからは「WordPress Codex」をご覧ください！
サイトタイトル・ナビゲーションの設定をしてヘッダー表示の確認をしよう！
現在のままでは完成図の様なヘッダーにはなっておりません。
それは、Wordpress側でヘッダータイトル画像やナビゲーションメニュー項目を設定していないからです。
ここでは、ヘッダータイトルとナビゲーションメニューがうまく表示されているか確認する意味も込めてヘッダー画像とナビメニュー項目を設定して表示させたいと思います。
ヘッダータイトル画像設定
タイトルで使用する画像は「【Wordpress自作テーマ開発②】自作テーマ開発を効率的に行う為の準備編」でダウンロードした「imageフォルダ」の中にロゴ画像として含まれておりますのでそちらを使用します。
管理画面→外観→カスタマイズ→サイト基本情報の順に進み画像を選択することで設定できます。
ナビメニュー項目設定
ナビメニューの設定を行います。
ナビメニューの項目を追加するためには、
管理画面→外観→メニューから行うことができます。今回はまだサイトの記事なども追加しておりませんので仮のメニューをカスタムリンクを使って設定しました。
この様にセットします。実際にこのメニューはデザインを確認するためものですので実質的な意味はありません。
ヘッダー完成
ヘッダーの設定は以上です。
完成した部分の表示の確認をしてみましょう。
以下の様なデザインになっていればOKです！
また画面幅が狭くなった時にメニューバーが表示されうまく機能しているかも確認しましょう。
上の画像のようにハンバーガーメニューが表示され、それを押すとメニューが表示されることを確認しましょう！
これが表示され動作すればヘッダーは完成です！！
お疲れ様でした。
以上がheader.phpでの追記点についての説明でした。
コンテンツ部分（main）を作ろう
まずは、Topページのコンテンツ部分の完成レイアウトを確認します。
コンテンツ部分は記事を縦に二列でトップページに6件表示させています。
現在の表示は以下の様になっています。
記事のタイトルがあり、投稿日、記事内容、カテゴリーが表示されています。
_s(UnderScores)のコンテンツ部分の記述を確認
まずはコンテンツ部分を表示させている_s(underscores)初期状態のコードを確認したいと思います。
初めに説明したindex.phpの以下の部分がコンテンツを表示しているコードです。
<!--コンテンツ部分の出力-->
<main id="primary" class="site-main">
<?php
if ( have_posts() ) ://もし投稿があれば記事があれば以下の内容を実行
if ( is_home() && ! is_front_page() ) ://もし、トップページでなければ（投稿ページ、固定投稿ページ）
?>
<header><!--投稿のタイトルをH1タグで出力-->
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;
/* Start the Loop */
while ( have_posts() ) ://投稿があれば「endwehile」までの内容を投稿の数だけ繰り返し処理
the_post();
/*
* Include the Post-Type-specific template for the content.
* If you want to override this in a child theme, then include a file
* called content-___.php (where ___ is the Post Type name) and that will be used instead.
*/
get_template_part( 'template-parts/content', get_post_type() );//template-partsディレクトリ内のcontent.phpを呼び出し
endwhile;//繰り返し処理終了
the_posts_navigation();//ポストナビゲーションを出力（ページネーション）
else ://投稿がなければ以下の内容を実行
get_template_part( 'template-parts/content', 'none' );//template-partsディレクトリ内のcontent-none.phpを呼び出し
endif;//if文終了
?>
</main><!-- #main -->
<!--コンテンツ部分の出力終了-->コードの説明はコード内のコメントをご覧ください。
ポイントとしては、if文で記事があるかを確認し、While文で記事を繰り返し表示させています。
while文で繰り返す内容として、get_template_part関数でtemplate-partsディレクトリ内のcontent.phpを呼び出しその内容を出力しています。
content.phpの内容を確認する
_s(underscores)デフォルトのcontent.phpコードは以下の通りです。
コードにコメントを入れておりますのでそちらも併せて確認してみてください。
<?php
/**
* Template part for displaying posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package BlogCreateChallenge
*/
?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>><!-- id,classに投稿関連のid,クラスを追加 -->
<header class="entry-header">
<?php
if ( is_singular() ) ://もし個別の投稿が表示中であれば、、
the_title( '<h1 class="entry-title">', '</h1>' );//投稿タイトルをH1タグで出力する
else ://それ以外ならば（個別の投稿が表示されていな場合は、、Topページなど）
the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );//投稿タイトルをH2タグで出力する
endif;
if ( 'post' === get_post_type() ) ://投稿タイプが”投稿”（管理画面の投稿からの記事）であれば、
?>
<div class="entry-meta">
<?php
blogcreatechallenge_posted_on();//blogcreatechallenge_posted_onという関数を呼び出し投稿日を出力（この関数はテーマファイルのincディレクトリ内にあるtemplate-tags.phpで定義されています。）
blogcreatechallenge_posted_by();//blogcreatechallenge_posted_byという関数を呼び出し投稿者を出力（この関数はテーマファイルのincディレクトリ内にあるtemplate-tags.phpで定義されています。）
?>
</div><!-- .entry-meta -->
<?php endif; ?>
</header><!-- .entry-header -->
<?php blogcreatechallenge_post_thumbnail(); ?><!-- blogcreatechallenge_post_thumbnailという関数を呼び出し投稿のサムネイルを出力(この関数はテーマファイルのincディレクトリ内にあるtemplate-tags.phpで定義されています。) -->
<div class="entry-content">
<?php
the_content(//投稿した記事の内容を出力
sprintf(
wp_kses(
/* translators: %s: Name of current post. Only visible to screen readers */
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'blogcreatechallenge' ),
array(
'span' => array(
'class' => array(),
),
)
),
wp_kses_post( get_the_title() )
)
);
wp_link_pages(
array(
'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'blogcreatechallenge' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php blogcreatechallenge_entry_footer(); ?><!--blogcreatechallenge_entry_footer()という関数を呼び出し表示されている投稿のカテゴリ、コメントを表示（この関数はテーマファイルのincディレクトリ内にあるtemplate-tags.phpで定義されています。）-->
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->先ほども説明しましたが、content.phpでは、index.php内のwhile文で繰り返し処理されるコードが書かれています。
出力されるものとしては、記事のタイトル、投稿日、投稿者、アイキャッチ、本文、カテゴリ、コメントです。
今回作成するトップページのコンテンツ部分では、記事タイトル、投稿日、アイキャッチ、本文の抜粋のみを表示させます。
テスト記事を挿入する
コンテンツ部分のコードを修正する前にそもそも記事がないとうまく表示できているかわかりませんので、テスト投稿という形で記事を15件ほど追加しましょう。
投稿を追加する方法は、管理画面→投稿→新規投稿から作成することができます。その際、アイキャッチも一緒に設定しましょう。アイキャッチで使う画像はなんでも構いませんが、当初ダウンロードしていただいたファイルにimageファイルがありその中にも画像がありますのでそちらを使用して頂いてもOKです。
自前のHTML,CSS,JavaScriptをindex.php・content.phpに移植する
コンテンツ部分の作成には、index.php・content.phpに変更を加える必要があります。
まずは、index.phpのコンテンツ部分から移植を行いたいと思います。
index.phpへ移植
_s(underscores)デフォルトで記述されていたコメントを全て削除しました。
今回index.phpで変更を行った部分は「meinタグ」の中のみです。
<!--header-->
<?php get_header();?>
<div class="ly_cont ly_cont__col">
<!--content-->
<main class="ly_cont_main">
<div class="ly_cont_card bl_cardUnit bl_cardUnit__col3">
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content');
endwhile;
else :
get_template_part( 'template-parts/content', 'none' );
endif;
?>
</div>
<?php the_posts_pagination(
array(
'mid_size' => 2,
'prev_next' => true,
'prev_text' => __( '前へ'),
'next_text' => __( '次へ'),
'type' => 'list',
)
); ?>
</main>
<!--sideber-->
<?php get_sidebar();?>
</div>
<!--footer-->
<?php get_footer();?>削除した部分についての説明
if ( is_home() && ! is_front_page() ) :
?>
<header>
<h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
</header>
<?php
endif;meinタグの下にあった上記のコードを削除しました。この記述は個別投稿ページ（投稿や固定ページなど）が表示されていれば投稿のタイトルをH1タグで出力するというコードでしたがこの内容は後に説明する個別投稿ページ（single.php、page.php）で設定するので削除しました。
追記した部分についての説明
３行目
３行目にmainタグをラップする（囲む）divタグを設置しました。
また、get-sideber();（サイドバー）の記述をdivタグ内に含めました。
理由としては、コンテンツ部分とサイドバー部分を２カラム（横並び）にするためです。
（横並びにはflexboxを使用しました。）
２０〜３１行目
the_posts_pagination()という記述のカッコ内にコードを付け足しました。
the_posts_paginationはWordpressで用意されているページネーションを出力する関数です。
カッコ内に記述をすることで表示内容を変更することができます。
追記コードの意味は以下のコメントを参照してください。
<?php the_posts_pagination(
array(
'mid_size' => 2, // 現在ページの左右に表示するページ番号の数
'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
'prev_text' => __( '前へ'), // 「前へ」リンクのテキスト
'next_text' => __( '次へ'), // 「次へ」リンクのテキスト
'type' => 'list', // 戻り値の指定 (plain/list)
)
); ?>その他、クラスやdivタグなどを追記しました。（今回この記事では主にPHPコードの説明となりますので省略します）
表示の確認
index.phpの記述を変更した後の表示を取りあえす確認しましょう。
以下の様に表示されていればOKです。
まだ、content.phpの記述を変更していないので完成図とは違いますが、サイドバーと２カラムになっていればとりあえずOKです。
content.phpへ移植
_s(underscores)の初期状態で記述されていたコメントを削除しています。
<article class="bl_card">
<a href="<?php the_permalink(); ?>" class="bl_card_link">
<figure class="bl_card_imgWrapper">
<img src="<?php the_post_thumbnail_url(); ?>" alt="">
</figure>
<div class="bl_card_body">
<?php the_title( '<h3 class="bl_card_ttl">', '</h3>' );?>
<span class="entry-date"><?php echo get_the_date(); ?></span>
<p class="bl_card_txt"><?php echo get_the_excerpt(); ?></p>
<a class="exce-read" href="<?php get_permalink($post->ID) ?>">続きを読む</a>
</div>
</a>
</article>削除した部分の説明
content.phpは_s(underscores) テーマの中で多く呼び出されています。（index.php,single.php,page.phpなど）
さまざまな形態の異なるページに対応できる様にするとコードが複雑化するので私はTopページのみでcontent.phpを使いその他の投稿ページ（single.php）ではcontent.phpに変わるファイルを作成しようと考えました。
そのため、ほぼ全てのコードを削除しました。
追記した部分についての説明
上記でも説明した通り、ほぼ全ての記述が追加したものとなっています。
追記したPHPコードの説明は以下をご覧ください。
●２行目、１０行目 the_permalink();
ループ中（while文）で処理される投稿のリンクを取得します。
●４行目 the_post_thumbnail_url();
投稿編集画面で設定されたアイキャッチ画像を表示します。
●８行目 echo get_the_date();
現在の投稿が書かれた日付を取得します。echoで取得したデータを出力しています。
●９行目 echo get_the_excerpt();
現在の投稿の概要を”[…]”テキストを最後に付けた状態で返す関数です。echoで取得したデータを出力しています。
表示の確認
content.phpの記述が終わりました。
これで表示を確認してみましょう。
以下の画像の様に記事が２カラムになっていればOKです。
投稿設定がデフォルトですので10件の記事が表示されていますがその変更は
管理画面→設定→表示設定の順に進み「1ページに表示する最大投稿数」を「６」に変更し保存すれば完成図の6件表示が実現できます。
この表示ができれば、コンテンツ部分は完成です。
それでは、次にサイドバーに移りたいと思います。
サイドバーを作ろう
ここまで、ヘッダー、コンテンツと作成を行なってきました。
次にサイドバーに作成に取り掛かります。
トップページを出力しているindex.phpの最後から２行目付近に「get_sideber();」という記述があります。
この関数によって、sideber.phpがindex.phpに呼び出されトップページのサイドバーとして出力されていました。
という事で、sideber.phpを編集し、 サイドバーを作りたいと思います。
_s(UnderScores)のsideber.phpの記述を確認
_s(underscores)のテーマファイルの中にsideber.phpというファイルがあります。
そこに書かれている内容がサイドバーを出力しています。
以下のコードがデフォルトのsideber.phpのコードです。
<?php
/**
* The sidebar containing the main widget area
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package BlogCreateChallenge
*/
if ( ! is_active_sidebar( 'sidebar-1' ) ) {//サイドバーが有効化されていなければ、
return;
}
?>
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>//登録されたサイドバーの出力
</aside><!-- #secondary -->たったのこれだけ？？と思う方もおられると思いますが、実際上記のコードは登録されたサイドバーの出力を行っているだけで、その登録はfunctions.phpに書かれてあります。
以下が_s(underscores)の初期状態にfunctions.phpに書かれているサイドバーを登録するコードです。
書かれているコードの解説はコード内のコメントを参照してください。
function blogcreatechallenge_widgets_init() {//関数作成
register_sidebar(//サイドバーを定義
array(
'name' => esc_html__( 'Sidebar', 'blogcreatechallenge' ),//サイドバーの名前
'id' => 'sidebar-1',//サイドバーのID
'description' => esc_html__( 'Add widgets here.', 'blogcreatechallenge' ),//サイドバーの説明テキスト
'before_widget' => '<section id="%1$s" class="widget %2$s">',//ウィジェットの直前に出力するテキスト
'after_widget' => '</section>',//ウィジェットの直後に出力するテキスト
'before_title' => '<h2 class="widget-title">',//タイトル直前に出力するテキスト
'after_title' => '</h2>',//タイトル直後に出力するテキスト
)
);
}
add_action( 'widgets_init', 'blogcreatechallenge_widgets_init' );//widgets_initというフックを使いサイドバーの登録自前のHTML,CSS,JavaScriptをsideber.phpに移植する
sideber.phpの添削はクラスの書き換えのみです。
現段階でサイドバーによって出力されている内容を見てもらってわかると思いますがきちんと内容を表示できているのでデザイン面での変更を行うためクラスの変更をしました。
<?php
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
return;
}
?>
<aside class="ly_cont_side">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>
functions.phpの変更はありません。
表示の確認
サイドバーの添削ができましたので、表示してデザインを確認してみましょう。
以下の様な表示になっていればOKです。
ですが、サイドバーの完成図の以下の画像とはタイトルの表示が異なります。
スタイルはstyle.cssで定義していますがうまくスタイルが当たっていません。
原因はタイトルのクラスが異なるという点です。
修正「ウィジェットを以前の状態に戻す」
実は最近Wordpressのアップデートでウィジェットエリアが大きく変わってしまいました。
以下の画像をご覧ください。
今回私は以前までのウィジェットエリアに戻しブログサイト制作を行なっていましたそのため、今回の説明でサイドバーのタイトルのスタイルが当たらないということになりました。
ウィジェットを以前の状態に戻せば完成図と一緒の表示になります。
ウィジェットを以前の状態に戻すためにはプラグインを使う方法もありますが、functions.phpに以下のコードを追記するだけです。
function example_theme_support() {
remove_theme_support( 'widgets-block-editor' );
}
add_action( 'after_setup_theme', 'example_theme_support' );
上記のコードをfunctions.phpの最後に追記します。
すると以前までのウィジェットエリアに戻ります。
このコードはWORDPRESS.ORGでも説明されている方法を参考にしました。
参考にしたWORDPRESS.ORGの記事はこちら
ウィジェットエリアに「ブロック」が設定されていますのでそれを全て削除します。
その後、左の利用できるウィジェットの項目をsideberのエリアにドラック&ドロップし各項目にタイトルを設定します。
全て保存し再度サイドバーの表示を確認しましょう。
下の画像のようにサイドバーの各項目のタイトルが黄色くなっていればOKです。
完成図では、画像付きの記事が表示されていましたがそれは少し複雑なので後ほど説明したいと思います。
以上でサイドバーは完成とします。
次にフッターを作成していきます。
フッターを作ろう
トップページを出力しているindex.phpの最後の行に「get_footer();」という記述があります。
この関数によって、footer.phpがindex.phpに呼び出されトップページのフッターとして出力されていました。
という事で、footer.phpを編集し、 フッターを作りたいと思います。
フッターの完成図を確認します。
以下のレイアウトでフッターを作成したいと思います。
_s(UnderScores)のfooter.phpの記述を確認
_s(underscores)初期状態にfooter.phpに書かれているのが以下のコードです。
コードの意味などはコード内のコメントを参照してください。
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package BlogCreateChallenge
*/
?>
<footer id="colophon" class="site-footer">
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'blogcreatechallenge' ) ); ?>"><!--Proudly powered by WordPressという文字列を出力しwordpress.orgへのリンクをつける-->
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'blogcreatechallenge' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'blogcreatechallenge' ), 'blogcreatechallenge', '<a href="http://underscores.me/">Underscores.me</a>' );//Theme: blogcreatechallenge by Underscores.me.という文字列を出力しunderscoresへのリンクをつける
?>
</div><!-- .site-info -->
</footer><!-- #colophon -->
</div><!-- #page -->
<?php wp_footer(); ?><!-- WordPressのテーマには欠かせない魔法の関数。これがないとプラグインやfunctions.phpでの記述などが動作しない（ヘッダーで登場したwp_header();と同じ役割） -->
</body>
</html>_s(underscores)初期状態のfooter.phpに書かれている内容はほとんどありません。
実際に出力されているのは、wordpress.orgへのリンクとunderscoresへのリンクのみです。
自前のHTML,CSS,JavaScriptをfooter.phpに移植する
footer.phpを添削したものが以下のコードです。
<footer>
<!-- 外側に当たる要素 -->
<div class="ly_footer">
<!-- 内側に当たる要素 -->
<div class="ly_footer_inner">
<!-- ここにfooterナビゲーションが入ります。 -->
</div>
</div>
<!-- 外側に当たる要素ここでボーダーを追加 -->
<div class="ly_footer hp_btGray">
<div class="ly_footer_bottom">
<small class="el_footerCopyright">©2021 Nino-Challenge-Blog</small>
</div>
</div>
</footer>
<div id="page_top" class="site-top">
<a href="#">Move Top</a>
</div>
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>削除したコード
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'blogcreatechallenge' ) ); ?>"><!--Proudly powered by WordPressという文字列を出力しwordpress.orgへのリンクをつける-->
<?php
/* translators: %s: CMS name, i.e. WordPress. */
printf( esc_html__( 'Proudly powered by %s', 'blogcreatechallenge' ), 'WordPress' );
?>
</a>
<span class="sep"> | </span>
<?php
/* translators: 1: Theme name, 2: Theme author. */
printf( esc_html__( 'Theme: %1$s by %2$s.', 'blogcreatechallenge' ), 'blogcreatechallenge', '<a href="http://underscores.me/">Underscores.me</a>' );//Theme: blogcreatechallenge by Underscores.me.という文字列を出力しunderscoresへのリンクをつける
?>
</div><!-- .site-info -->このサイトの情報を出力していた必要のないコード全てを削除しました。
追加したコードの説明
追加したphpのコードは一切ありません。
全てHTMLのタグのみの追記になりました。
内容としては、サイトのコピーライト文字の出力とスクロールした際にサイトトップに戻るボタンを設置しました。
サイトのトップに戻るボタンは前回の記事でfunctions.phpで設定した「main.js」にて一定量のスクロールがあれば、トップに戻るボタンを表示そうでなければ非表示にするというコードを書いております。（サイトトップに戻るボタンの実装は違う記事で説明予定です）
フッター表示の確認
最後に表示の確認をしたいと思います。
以下のように表示されていればOKです。
一般的にフッターにもウィジェットが配置されていることが多いですが今回はブログということもあり必要ないかなぁって思い設置しませんでした。
また違う記事でフッターにウィジェットを追加するカスタマイズなども説明もしたいと思います。
トップページ作成まとめ
以上でトップページの作成は一旦終わりです。
お疲れ様でした。
トップページ表示確認
現在まで、ヘッダー、コンテンツ、サイドバー、フッターの作成をしました。
最後に表示を確認してみましょう！
以下の画像のような表示になっていればOKです！！
最後に
うまく表示はできましたか？
できなかった場合はもう一度コードの内容を見直してみましょう！
エラーが出た場合はエラーコードの内容をよく読めばエラーが起きている箇所が特定できますので修正しましょう。
次回の記事では、個別投稿ページ（single.php）の作成をしたいと思います。
最後まで読んでいただきありがとうございました！
それでは次の記事でお会いしましょう！！
