WordPressでトップページ・ナビ・サイドバーを、管理画面から気軽に変更できるようにする

前回の記事でオリジナルテーマの作成を行いましたが、トップページやヘッダーフッターナビ・サイドバーを変更する際は、テーマのPHPファイルを編集する必要がありました。

WordPress管理画面の「外観」→「テーマファイルエディター」での編集も可能ですが、誤ってテーマファイルを壊してしまう可能性もありますので、それぞれ固定ページ・ウィジェット・メニュー化して、気軽にカスタマイズ出来るようにしたいと思います。

※WordPress5.0からエディターがブロックエディターに変更されましたが、今回はプラグイン「Classic Editor」＋「Classic Widgets」または、代替の「Disable Gutenberg」を使用し、クラシックエディターで編集しています。

今回編集するサンプルサイトのWordPressバージョンは6.0.1で、デザインはこちらです。

トップの固定ページ化

トップページがWordPressの管理画面から編集できないサイトも多いですが、それは投稿記事出力などに使うPHPが固定ページ内では使えないからです。
なので、PHP部分だけ別のファイルを呼び出す方法を使います。

トップに固定ページを指定、front-page.phpがある場合は削除

まずトップページ用の固定ページをいったん空で作成し、
WordPress管理画面の「設定」→「表示設定」→「ホームページの表示」で、トップの表示用に作成した固定ページを指定します。

front-page.phpが存在していると、そちらが優先して表示されてしまいますので、バックアップを取ってテーマフォルダから削除します。

※トップ表示の優先順位：
front-page.php ＞ 「表示設定」で指定した固定ページ ＞ home.php ＞ index.php

これでトップページには指定した固定ページが表示されるようになります。

functions.phpを編集

固定ページ内でPHPファイルを呼び出すためのショートコードの設定を、functions.phpに追加します。

// PHPファイルを呼び出すショートコード
function Include_my_php($params = array()) {
	extract(shortcode_atts(array(
		'file' => 'default'
	), $params));
	ob_start();
	get_template_part($file,'');
	return ob_get_clean();
}
add_shortcode('myphp', 'Include_my_php');

※子テーマにも対応できるコードに修正しました。

トップ用固定ページの編集

元々トップ表示に使っていたPHPファイルのソースはこちらです。

<?php get_header(); ?><!-- ヘッダーの読み込み -->

<div id="mainimage">
	<img src="<?php echo get_template_directory_uri(); ?>/images/home-main.png" alt="">
</div>

<div class="content">
	<div role="main">
		<section id="posts">
			
			<h2>最近の記事</h2>
			<ol>
				<?php if(have_posts()): while(have_posts()): the_post(); ?>
				<li>
					<a href="<?php the_permalink(); ?>">
						<time><?php the_time('Y年n月j日') ?></time>
						<div>
							<span class="label category"><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span>
							<span class="title"><?php the_title(); ?></span>
						</div>
					</a>
				</li>
				<?php endwhile; endif; ?>
			</ol>
			
			<nav>
				<a href="<?php echo esc_url( home_url( '/' ) ); ?>blog/">記事一覧へ</a>
			</nav>
		</section>
	</div>

	<?php get_sidebar(); ?><!-- サイドバーの読み込み -->
	
</div>

<?php get_footer(); ?><!-- フッターの読み込み -->

ここから共通部分を除いたメインコンテンツ部分を抜き出して固定ページにペーストし、
最近の記事のPHP部分を、ショートコードの
[myphp file='latestpost']
に変更してPHPファイルを呼び出します。
（'latestpost'の箇所は、呼び出すPHPファイルの名前に適宜変更してください。）

また、他にPHPを使っている箇所があったらパスを通常のHTMLに変更します。

トップ用固定ページのソースはこのようになりました。

<div role="main">
	<section id="posts">
		
		<h2>最近の記事</h2>
		
		[myphp file='latestpost']
		
		<nav>
			<a href="blog/">記事一覧へ</a>
		</nav>
	</section>
</div>

latestpost.phpの新規作成（呼び出すPHPファイル）

最近の記事を表示するためのlatestpost.phpを作成します。
（latestpost.phpはお好きなファイル名に変更して構いませんが、
先ほどの[myphp file=’latestpost’]のクォーテーションの中も同じ名前に変更してください。）

元々使っていたメインループのPHPはエラーになってしまいますので、サブループで取得する方法に変更します。

※メインループとサブループの違いは、こちらの記事が分かりやすく説明されていましたので、参考になさってください。
https://www.tou-k.jp/IT_HP/wordpress/1992/

<ol>
<?php
	$paged = (int) get_query_var('paged');
	$args = array(
		'paged' => $paged,
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => 5, // 表示件数
		'orderby' => 'date',   // ソートの基準とする項目
		'order' => 'DESC'      // ソート並び順をDESC(降順)、ASC(昇順)
	);
	$the_query = new WP_Query($args);

	if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post();
?>
	<li>
		<a href="<?php the_permalink(); ?>">
			<time><?php the_time('Y年n月j日') ?></time>
			<div>
				<span class="label category"><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></span>
				<span class="title"><?php the_title(); ?></span>
			</div>
		</a>
	</li>
<?php endwhile; endif; wp_reset_query(); ?>
</ol>

このlatestpost.phpをテーマフォルダ直下にアップロードすると、固定ページ内で呼び出した箇所に最近の記事一覧を表示できます。

固定ページ範囲外の調整

上部のメイン画像は固定ページの範囲外でしたので、共通部分にトップページのみにメイン画像を表示するための記述を追加します。

今回はheader.phpの最後に追加しました。

<?php if ( is_home() || is_front_page() ) : ?><!-- トップ（ホームとフロント）ページのみに表示する -->
<div id="mainimage">
	<img src="<?php echo get_template_directory_uri(); ?>/images/home-main.png" alt="">
</div>
<?php endif; ?>

これでトップを固定ページから気軽に変更できるようになりました。

サイドバー・ヘッダーフッターナビなどのウィジェット・メニュー化

ウィジェットとメニューの違い

メニューはテキストリンク、
ウィジェットは画像やカスタムHTML・カレンダーなど、さまざまな機能が利用できます。
用途に合わせて使い分けます。

メニュー

functions.phpの編集

テーマの初期設定ではWordPress管理画面にメニューの項目がありません。
functions.phpに設定を追加する必要があります。

// カスタムメニュー作成
function menu_setup() {
	register_nav_menus( array(
		'header-menu' => 'ヘッダーメニュー',
		'footer-menu' => 'フッターメニュー',
		//'sp-menu' => 'スマホメニュー', など、使いたい分このセットを増やします
	) );
}
add_action( 'after_setup_theme', 'menu_setup' );

header.php、footer.phpの編集

header.php、footer.phpなどの中の、メニューを表示したい箇所に下記出力コードを記述します。

<?php 
	wp_nav_menu(array(
		'theme_location' => 'header-menu'
	));
?>

‘header-menu’の部分は先ほど設定したidに合わせます。

メニューの編集

これで管理画面の「外観」→「メニュー」から編集すると、出力コードを記述した箇所に反映されるようになります。
メニューの編集方法については他に沢山記事がありますので省略します。

追加したメニューの表示が崩れている場合はCSSを適宜調整します。

これでWordPress管理画面からメニューを気軽に変更できるようになりました。

ウィジェット

functions.phpの編集

テーマの初期設定では管理画面にウィジェットの項目がありません。
functions.phpに設定を追加する必要があります。

// ウィジェット追加
function my_theme_widgets_init() {
	register_sidebar( array(
		'name' => 'サイドバー1',
		'id' => 'sidebar1',
		'description'   => 'サイドバー1の説明',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',	// ウィジェット直前に追加するソース
		'after_widget' => '</div>',									// ウィジェット直後に追加するソース
		'before_title' => '<h2 class="widgettitle">', 				// ウィジェットのタイトル直前に追加するソース
		'after_title' => '</h2>', 									// ウィジェットのタイトル直後に追加するソース
	) );
	
	// ここから
	register_sidebar( array(
		'name' => 'サイドバー2',
		'id' => 'sidebar2',
		'description'   => 'サイドバー2の説明',
		'before_widget' => '<div id="%1$s" class="widget %2$s">',	// ウィジェット直前に追加するソース
		'after_widget' => '</div>',									// ウィジェット直後に追加するソース
		'before_title' => '<h2 class="widgettitle">', 				// ウィジェットのタイトル直前に追加するソース
		'after_title' => '</h2>', 									// ウィジェットのタイトル直後に追加するソース
	) );
	// ここまで、使いたい分このセットを増やします
}
add_action( 'widgets_init', 'my_theme_widgets_init' );

‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’, の箇所の
　%1$sは、ウィジェット名＋番号
　%2$sは、widget_ウィジェット名
に変換されますので、CSS指定などがしやすくなります。

sidebar.phpの編集

sidebar.phpなどの中の、ウィジェットを表示したい箇所に下記の出力コードを記述します。

<?php if ( is_active_sidebar('sidebar1') ) : ?>
	<ul class="menu">
		<?php dynamic_sidebar('sidebar1'); ?>
	</ul>
<?php endif; ?>

‘sidebar1’の部分は先ほど設定した’id’に合わせます。

ウィジェットの編集

これで管理画面の「外観」→「ウィジェット」の内容が、出力コードを記述した箇所に反映されるようになります。
ウィジェットの編集方法については他に沢山記事がありますので省略します。

追加したウィジェットの表示が崩れている場合はCSSを適宜調整します。

これでウィジェットからサイドバーを気軽に変更できるようになりました。

searchform.phpを新規作成 ※検索ウィジェットを使用する場合

検索窓は好みのデザインにするためにコード自体をカスタマイズする必要があったので、searchform.phpを作成しました。
テーマフォルダにアップロードすると、検索ウィジェットを使用したときにこのファイルが呼び出されます。

<form method="get" id="search" action="<?php echo home_url('/'); ?>">
	<div>
		<input name="s" type="text" placeholder="検索...">
		<button type="submit" name="button">
			<img alt="検索" src="<?php echo get_template_directory_uri(); ?>/images/search-icon.png">
		</button>
	</div>
</form>

search.phpを新規作成 ※検索ウィジェットを使用する場合

検索結果を表示するテンプレートです。

<?php get_header(); ?><!-- ヘッダーの読み込み -->

<div class="content">

	<div role="main">
	
		<!-- ここから検索結果 -->
		<section id="search-results">
			<h2 class="title">「<?php the_search_query(); ?>」と一致するものは<?php echo $wp_query->found_posts;?>件です</h2>
			<?php if(have_posts()): while(have_posts()): the_post(); ?>
			<section class="entry entry-summary">
				<h2 class="title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
				<?php the_excerpt(); ?>
				<footer>
					<p>投稿日: <?php the_time('Y年n月j日') ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>category/<?php $category = get_the_category(); $cat_slug = $category[0]->category_nicename; echo $cat_slug; ?>" rel="tag" class="label category"><?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?></a></p>
				</footer>
			</section>
			<?php endwhile; ?>
			
			<?php else : ?>
				<!-- 検索結果が無い場合の表示 -->
				<p>「<?php the_search_query(); ?>」と一致する結果は見つかりませんでした。</p>
			<?php endif; ?>
			
		</section>
		<!-- ここまで検索結果 -->
		
	</div>

	<?php get_sidebar(); ?><!-- サイドバーの読み込み -->
	
</div>

<?php get_footer(); ?><!-- フッターの読み込み -->

まとめ

これでトップページ・ナビ・サイドバーを管理画面から気軽に変更できるようになりました。

弊社ネディアではサイト・システム制作や保守管理サービスを行っています。
分からない、上手くいかないなどがございましたら代行いたしますのでご連絡ください。

他にもサーバ・ネットワーク保守なども行っておりますので、ネットワークのことなら全てネディアにおまかせください。

お見積もり・お申し込み・お問い合わせはこちら
　
　

この記事を読んだ方はこちらも読まれています

デザインそのままMovable Type→WordPress移行