wp-content/themes にフォルダを作成して、その中に最低限必要なのが、style.css と index.php です。
0) index.php
( ここで使用しているテンプレートで、テンプレート階層の最下層です )
単純なサイトならばこれだけでもなんとかなりますが、これ以外に以下の部品を用意するだけで、WordPress のテーマの概要を掴む事ができます。
1) header.php
2) footer.php
3) content.php
( 1〜3 は、index.php から呼び出される部品です )
4) functions.php
( WordPress のオプションを設定したり、テーマで必要な関数を定義します / PHP で記述します )
style.css
@charset "UTF-8";
/*
Theme Name: テーマ名
Theme URI: テーマのサイトのURI
Author: 作者名
Author URI: 作者のサイトのURI
Description: 説明
Version: バージョン
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
sryle.css は、もちろん css を記述して使用できますが、いろいろなバリエーションのページを作成する場合に必ずしもこのファイルにこだわる必要も無いので、ここでは単なる『テーマのラベル』として認識しておきます。
※ 自動的にこの style.css が必ず設置されるものでは無く、ここでは css は『テーマの構成』には関係ありません
この style.css の中にコメントとして書かれた内容のうち、『テーマ名』が、WordPress 管理画面の『テーマ』で表示されて『有効』にする事ができます
index.php
get_header() と get_footer() は、後述の header.php と footer.php で定義された内容を出力します。
wp_head() は、システムで定義済の ヘッダー部分に出力するべき内容を出力します。例えば、プラグインで登録されたアプリケーションにとって必要なものがここを経由して実装されます。
そして一番重要なのは、get_template_part() で、任意のテンプレートを使用する事ができるという事です。
ここでは、"content.php" が使用されます
<?php
/*
メインテンプレートファイル
これはWordPressのテーマで最も一般的なテンプレートファイルです
テーマに必要な2つのファイルの1つ（style.css)
これは、何も特定のクエリに一致しない場合にページを表示するために使用されます。
*/
get_header();
wp_head();
?>
</head>
<body>
<div id="root">
<h3>Main Template File</h3>
<?php
if ( have_posts() ) :
// *****************************
// 投稿がある間ループ
// *****************************
while ( have_posts() ) :
// *****************************
// 次の投稿を取得
// *****************************
the_post();
// *****************************
// フォーマットを取得する
// (通常は空文字列)
// *****************************
$get_post_format = get_post_format();
print "<span>$get_post_format</span>";
// *****************************
// "content-{$get_post_format}.php" を使用
// *****************************
get_template_part( 'content', $get_post_format );
endwhile;
else :
// 投稿が無い場合に表示したい内容
endif;
?>
</div>
<?php get_footer(); ?>
header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ユーザヘッダー -->
<link rel="stylesheet" href="<?= get_stylesheet_uri() ?>" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
HTML 上の <head> 〜 </head> の共通の部分という認識でいいと思います。
※ ここでは、意図的に style.css を記述しています。
footer.php
<!-- ユーザーフッター -->
</body>
</html>
HTML 上の コンテンツの下部にある共通の部分です。
content.php
<div id="post-<?php the_ID(); ?>">
<a href="<?= esc_url( get_permalink() ) ?>"><?= get_the_title() ?></a>
<?php
the_content( );
?>
</div>
the_content( ) は、現在の投稿の本文を出力し、the_ID() は投稿の ID を出力し、get_permalink() と get_the_title() で投稿のタイトルに単独ページへのリンクを設定しています。
functions.php
システムに対して、オプション設定を行うファイルです。オプションを追加したり、デフォルトで追加されているものを削除したり、PHP として技術的な処理を行ったりします。
ここでは、冒頭でテーマ限定でエラー時にエラー出力をするように設定しています。
さらに、システムで定義済の『投稿フォーマット』を追加して、投稿時に選択できるようにしています。
( ここでは、content-gallery.php が無いので、content.php が使用されます )
<?php
// ***********************************************
// このテーマでエラーの場合表示
// ***********************************************
error_reporting( E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED & ~E_WARNING );
ini_set('display_errors', '1');
// ***********************************************
// 投稿フォーマットを追加
// ***********************************************
add_theme_support('post-formats', array( 'gallery' ));
// ▼ wp_head() から排除
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
// ***********************************************
// rsd_link は、general-template.php 内で定義
// ***********************************************
remove_action( 'wp_head', 'rsd_link' );
// ***********************************************
// emoji 関連削除
// ***********************************************
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
// ***********************************************
// wp-json 削除
// https://developer.wordpress.org/reference/functions/rest_output_link_wp_head/
// ***********************************************
remove_action('wp_head','rest_output_link_wp_head');
// ***********************************************
// dns-prefetch 削除
// wp-includes/default-filters.php
// ***********************************************
remove_action('wp_head','wp_resource_hints',2);
// ***********************************************
// フィード 削除
// ***********************************************
remove_action('wp_head', 'feed_links_extra', 3);
// ***********************************************
// prev & next 削除
// ***********************************************
remove_action('wp_head', 'adjacent_posts_rel_link_wp_head');
// ***********************************************
// canonical 削除
// ***********************************************
remove_action('wp_head', 'rel_canonical');
// ***********************************************
// shortlink 削除
// ***********************************************
remove_action('wp_head', 'wp_shortlink_wp_head');
// ***********************************************
// oembed 削除
// ***********************************************
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');
// ***********************************************
// 管理バー 削除
// ***********************************************
add_filter( 'show_admin_bar', '__return_false' );
?>
二つの投稿の表示結果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- ユーザヘッダー -->
<link rel="stylesheet" href="http://ドメイン/lightbox/wp-content/themes/lightbox/style.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
</head>
<body>
<div id="root">
<h3>Main Template File</h3>
<span>gallery</span><div id="post-35">
<a href="http://ドメイン/lightbox/template/2018/08/29/next-post/">ふたつめ</a>
<p>the_post_navigation の確認</p>
</div>
<span></span><div id="post-1">
<a href="http://ドメイン/lightbox/none/2018/08/29/hello-world/">Hello world!</a>
<p>WordPress へようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてください !</p>
</div>
</div>
<!-- ユーザーフッター -->
</body>
</html>
▼ スプリットコンテナを使用していますが、配置方法は基本的に直感的なものと逆です。
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
