wordpressで自作テーマを作成したので、今後のための備忘録です。
私自身は元々Webデザイナーでグラフィックを担当していたのですが、長年Webに携わっていたら、今ではフロントエンドを任され、さらに、wordpressの構築まで手を伸ばしてしまったニワカエンジニアです。適当な部分が多いと思いますので、あまり参考にしないでください。
あくまでも個人の備忘録になります。
##必要なファイル
ざっくり次のファイルがあればテーマは表示されて、最低限の機能は担保される。
home.php
index.php
category.php
page.php
single.php
search.php
archive.php
sidebar.php
404.php
style.css
このファイルをとりあえず作成して、FTPでwordpressのテーマが格納されているところに入れると、テーマ選択画面で、自作テーマを作成することができる。
各ページの基本的な設定などはこちらの記事を読まれるとわかりやすいです。
ざっくりWordPressの自作テンプレートの作り方
###最初のページは「index.php」じゃないらしい。
テーマ作成で気をつけたいのが最初に表示されるページは「index.php」ページじゃないらしい。
WordPress トップページのテンプレは index.php ではなく front-page.php が最適
ただ、index.phpで作成してもfront-page.phpやhome.phpが存在しない場合、問題なく最初に表示されるから、大きな問題ではないようだ。
各ページのテンプレートを記載しておく
こちらの記事を参考にしています。
https://wpmake.jp/contents/theme/theme_create/
Style.css の作成
このファイルが結構重要
/*
Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
header.phpの作成
<!doctype html>
<html>
<head>
<?php wp_head(); ?>
</head>
<body>
<header>
</header>
必ず <?php wp_head(); ?> を記載しておくこと
footer.phpの作成
<footer>
<p class="copyright">Copyright © <?php echo date("Y"); ?> XXXXXX All Rights Reserved.</p>
</footer>
##index.php もしくは front-page.phpの作成方法
##function.phpの設定
一番ややこしいのは、function.phpである。
function.phpはwordpressを使用する（カスタマイズする）側の人間が設定できる部分で、このファイルに色々と記述しておくと、wordpressの元の機能と絡み合ってうまいことやってくれる設定ファイルぽい。
何も書かなくても機能はするけど、書いておくと色々とできる。しかし、初心者の身分だとどうして良いのか全くわからないし、書き方も色々あるので、諸先輩方の物を参考にすると良いと思います。
この記事の内容が一番良かったです。
[WordPress]Olein Designのfunctions.phpを詳しく解説します（コピペ利用可）
色々細かく設定すると幅が広がりそうです。
###サムネイルのサイズ設定
フロントエンドを経験して、いくつかのテンプレート開発とかやられた方だとwordpressのテーマ作成を経験していなくても大体の仕組みはわかると思います。呼び出しの値をHTMLのタグに埋め込んでいくような感じです。だけど、少し難しいのがこのfunctionとの連携だと思います。
特にサムネの表示設定は結構ややこし。吐き出されるのもHTMLが付いている状態なので。
簡単にサムネイルの設定方法を記載しておきます。
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 500, 301, true);
これをfunction.phpに記載すると、post-thumbnailsを読み込んだ時に、500×301で出力してくれます。add_themes_supportでテーマをサポートしているpost-thumbnailsを加えろって感じだと思います。そして、次の行でサイズを指定しています。
この辺の記事を読むとより詳しく設定方法が書いてあります。
WordPress アイキャッチ画像サイズ カスタマイズまとめ
##記事一覧ページの作成
読むWebメディアのサイトとかである、記事一覧ページの作成で必要になった部分をまとめておきます。
###記事の呼び出し
もっとも基本は記事を呼び出すことです。
自作で投稿するフォームなどを作るのではなく、Wordpressに標準で付いている通常の記事を呼び出す場合は次の方法で呼び出すことができます。
$args = array(
'orderby' => 'id'
);
ここで、$argsっていう配列に呼び出しの条件を設定しています。
####記事で使用されているカテゴリの呼び出し
<?php
$args = array(
'orderby' => 'id'
);
$categories = get_categories( $args );
foreach ( $categories as $category ) {
$cat_link = get_category_link($category->cat_ID);
echo '<li class="category-list__item"><a href="' . $cat_link . '">' .
$category->name . '</a></li>';
}
?>
これは、記事id順で呼び出したカテゴリをliの中に埋め込んでいく方法です。
###記事一覧のページャー作成
ページャーを作成するのが面倒でした。プラグインを使用すれば良いのかもしれませんが、あまりプラグインに頼りたくなく、色々と調べて作りました。
ページャーはfunction.phpに機能を追加するこちらのサイトの物を使用しました。
WordPressでページャー（ページネーション）をプラグインなしで実装
こちらのサイトを参考に作成したページャーになります。
divで作成されていたのをulに変更してみました。
/*
* ページャー
*/
function pagination( $pages, $paged, $range = 2, $show_only = false ) {
$pages = ( int ) $pages; //float型で渡ってくるので明示的に int型 へ
$paged = $paged ?: 1; //get_query_var('paged')をそのまま投げても大丈夫なように
//表示テキスト
$text_first = "« 最初へ";
$text_before = "‹ 前へ";
$text_next = "次へ ›";
$text_last = "最後へ »";
if ( $show_only && $pages === 1 ) {
// １ページのみで表示設定が true の時
echo '<div class="pagination"><span class="current pager">1</span></div>';
return;
}
if ( $pages === 1 ) return; // １ページのみで表示設定もない場合
if ( 1 !== $pages ) {
echo '<div class="pagination">';
echo '<ul class="pager">';
echo '<li class="prev"><a href="'. get_pagenum_link( $paged - 1 ) .'">'. $text_before .'</a></li>';
for ( $i = 1; $i <= $pages; $i++ ) {
if ( $i <= $paged + $range && $i >= $paged - $range ) {
// $paged +- $range 以内であればページ番号を出力
if ( $paged === $i ) {
echo '<li class="current"><span>'. $i .'</span></li>';
} else {
echo '<li><a href="'. get_pagenum_link( $i ) .'">'. $i .'</a></li>';
}
}
}
echo '<li class="next"><a href="'. get_pagenum_link( $paged + 1 ) .'">'. $text_next .'</a></li>';
echo '</ul>';
echo '</div>';
}
}
###「前の記事、次の記事」の作成
そして、記事ページでよくあるのが前の記事と次の記事を表示するパーツです。
こちらはfunctionではなくテンプレートに記載します。
<div class="pre-next">
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<ul class="items">
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<li class="pre arrow4-r"><a href="' . get_permalink($prevpost->ID) . '"><div><span class="arrow-title">前の記事</span>' . get_the_post_thumbnail($prevpost->ID, 'thumbnail') . '</div><span class="tit">' . get_the_title($prevpost->ID) . '</span></a></li>';
} else { //前の記事が存在しないとき
echo '<li class="pre none"><a href="' . network_site_url('/') . '">TOPへ戻る</a></li>';
}
if ( $nextpost ) { //次の記事が存在しているとき
echo '<li class="next arrow4-l"><a href="' . get_permalink($nextpost->ID) . '"><div><span class="arrow-title">次の記事</span>' . get_the_post_thumbnail($nextpost->ID, 'thumbnail') . '</div><span class="tit">' . get_the_title($nextpost->ID) . '</span></a></li>';
} else { //次の記事が存在しないとき
echo '<li class="next none"><a href="' . network_site_url('/') . '">TOPへ戻る</a></li>';
}
?>
</ul>
<?php } ?>
</div>