Luxeritasオリジナルトップページ作成手順

当サイトのトップページが寂しかったので、オリジナルのトップページを作ってみました。

作成手順として残したいと思います。

環境

開発時の当サイトの環境です。

WordPress 5.2.1
PHP7.2.17
Luxeritasバージョン: 3.5.9
Luxeritas Child Themeバージョン: 3.0.0

方針

・極力、『Luxeritas』オリジナルを修正せずに、作成を行う。
・ヘッダーとフッターは残し、サイドバーは表示しない。
・各カテゴリの人気記事を表示する。
・スマホ対応

準備したファイル

home.php
header.php

ファイルはこの２つと、CSSの追加で”style.css”を修正。

『home.php・header.php』は、Luxeritas親テーマフォルダから子テーマフォルダへコピーし、子テーマの方を修正。

 

修正箇所

home.php

home.php

<?php
/**
 * Luxeritas WordPress Theme - free/libre wordpress platform
 *
 * This program is free software; you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation; either version 2 of the License, or
 * (at your option) any later version.
 *
 * @copyright Copyright (C) 2015 Thought is free.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GPL v2 or later
 * @author LunaNuko
 * @link https://thk.kanzae.net/
 * @translators rakeem( http://rakeem.jp/ )
 */

global $luxe;
get_header();
?>
<div id="section"<?php echo $luxe['content_discrete'] === 'indiscrete' ? ' class="grid"' : ''; ?>>
<?php
if( isset( $luxe['grid_type'] ) && isset( $luxe['list_view'] ) && $luxe['list_view'] !== 'content' ) {
	get_template_part( 'loop-grid' );
}
else {
	get_template_part( 'loop' );
}
?>
</div><!--/#section-->
</main>
<?php thk_call_sidebar(); ?>
</div><!--/#primary-->
<?php echo apply_filters( 'thk_footer', '' ); ?>

20行目（<div id=･･･）から31行目（<?php thk_call_sidebar(); ?>）を削除し、そこへ表示したい内容（各カテゴリの人気記事）を書き込んで行きます。

header.php

header.php修正前

	?>
<main id="main"<?php if( isset( $luxe['add_role_attribute'] ) ) echo ' role="main"'; ?>>

header.php修正後

	if (!is_front_page () || !is_home ()) {
	echo '<main id="main" '; if( isset( $luxe['add_role_attribute'] ) ) echo ' role="main"'; 
	echo '>';
}
?>

『header.php』は非常に長いです。

ファイルの一番最後の、２行を変更です。
トップページ表示時は”<main>”ブロックを表示しないように修正しました。

条件分岐についてはこちらで解説しています（ショートコード内で無くても同じです）
WordPress ショートコード 条件分岐（２）

style.css

style.css



.flex_test-box {
	background-color:  #f0f0f0;	/* 背景色指定 */
	display: flex;				/* フレックスボックスにする */
	flex-wrap: wrap;			/* 折り返し指定 */
	justify-content: space-between;
}
 
.flex_test-item {
	margin-bottom: 3rem;
	width:49%;
	padding: 3rem;
	vertical-align: baseline;
	text-align:  center;		/* 文字中央揃え */
	background-color:  #fff;	/* 背景色指定 */
	box-sizing: border-box;
	flex: 430px; 
}

h2 {
	border-bottom: solid 3px #00293c;
	position: relative;
}

HTML出力結果

<div class="flex_test-box">
  <div class="flex_test-item">
	<h2>カテゴリタイトル１</h2>
	記事１
	記事２
	記事３
  </div>
  <div class="flex_test-item">
	<h2>カテゴリタイトル２</h2>
	記事１
	記事２
	記事３
  </div>
	<h2>カテゴリタイトル３</h2>
	記事１
	記事２
	記事３
  </div>
</div>

直接は関係ありませんが、CSSも残しておきます。

フレックスボックスを使い、PCなどの横幅がある場合は、カテゴリを２列表示にし、スマホなどは１列表示にしました。

スマホ表示画面

まとめ

他の作業も行いながらだったため、３日くらいかかりました。（実質１０時間くらい）

手こずったのは、『header.php』の一番最後に<main>ブロックの開始があり、それが分からず、サイドバーが表示されなくなっても、空白のままサイドバーの空間が確保されてしまいました。
それを見つけるまでに時間がかかりました。

あとは、CSSの修正で、上手く横２列にならなかったり、スマホで見ても２列になってしまったり･･･

さらに、各カテゴリの人気記事のリンクを作成する際に、問題が発生しました。
『設定ー＞表示設定ー＞ホームページの表示』で「最新の投稿」に設定しているため、トップページ表示は内部的には「最新の投稿文章」を読み込んだ処理をしています。そこへ、「home.php」を割り込ませ、表示されるので、リンク部分が表示されず、少し手こずりました。

WordPressの基本が、良く分からなかったため、余計に時間はかかっていると思います。
「Luxeritas」をお使いの方は、ヒント程度にはなると思います。

今回は、画像も表示せずにシンプルなトップページにしてみました。
もう少し凝ったものに変更したら、また記事にしたいと思います。

WordPressいろいろ