まず必要なもの
WordPressには、最初からテンプレートがいくつか用意されています。
また、テーマを変えたいときは、管理画面のテーマから好みのデザインを選ぶだけで、簡単にデザインを変えることが可能です。
ただし、テーマは初期状態なので、テーマの写真通りの形にするには、自分である程度カスタマイズする必要があります。
自分は、どうせ変更を入れるなら、最初から自分でテーマを作っちゃったほうが速いじゃんという考えです。自分で作れば、ライセンス等も気にしなくて良いですしね。
最低限必要なのが、index.phpとstyle.cssとfunctions.php です。極論で言うと、これで全部まかなえます。
実際には、下記の図のような構成でテンプレートが呼ばれることになっています。
トップページ（サイトの一番最初に表示されるページ）であれば、まず、front-page.phpというPHPファイルを探し、あればそれを表示しますが、無ければ、home.phpを探し、無ければ、index.phpを探して表示するという経過をたどります。
どのページを表示するにせよ、該当のPHPファイルが無ければ、最終的にindex.phpで表示することになっています。
なので、とりあえず、index.phpに必要なコードさえ書いておけば、全部のページをindex.phpでまかなえるということになります。（特別デザインにこだわらなければ。）
まずはテンプレート名を決める
自作テーマを作るにあたり、WordPressのテンプレートフォルダに自作用のフォルダを作成します。
WordPressがインストールされてるフォルダ＞＞wp-content＞＞themes
このthemesの中に、いろんなテーマファイルが格納されています。自作テーマの名前を決めたら、ここにアルファベットで命名したフォルダを作成します。
今回はとりあえず「mytheme」とします。
cssを作る
作成したmythemeフォルダの中に、style.cssを作成します。
style.cssの先頭に記述する必要のある項目は以下の通り。必須項目のみでも大丈夫です。
- Theme Name: テーマの名前（必須）
- Template: テーマのURL
- Author: テーマの作者
- Version: テーマのバージョン
- Description: テーマの説明
WordPress付属のtwentytwentyを例にしますと、こんな風に書かれています。
/*
Theme Name: Twenty Twenty
Text Domain: twentytwenty
Version: 2.0
Tested up to: 6.0
Requires at least: 4.7
Requires PHP: 5.2.4
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-patterns, block-styles, wide-blocks, accessibility-ready
Author: the WordPress team
Author URI: https://wordpress.org/
Theme URI: https://wordpress.org/themes/twentytwenty/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/この下から、CSSのコードを記載することになります。
index.phpを作る
作成したmythemeフォルダの中に、index.phpを作成します。
index.phpには、最低限動くコードと、表示用のHTMLタグを記載します。
<?php
/*
index
*/
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>サイトタイトル</title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>
<?php wp_body_open(); ?>
<section id="primary" class="content-area">
<main id="main" class="site-main">
<?php
if ( have_posts() ) {
// Load posts loop.
while ( have_posts() ) {
the_post();
the_content();
}
// Previous/next page navigation.
the_posts_navigation();
} else {
echo '表示するコンテンツがありません';
}
?>
</main><!-- .site-main -->
</section><!-- .content-area -->
<?php wp_footer(); ?>
</body>
</html>
if ( have_posts() ) でコンテンツ（投稿）の有無を条件式にしています。今回は最低限のコードなので簡略化してますが、実際のコードは、投稿の有無＞＞あるなら1ページの投稿数を指定＞＞画像・タイトル・文章を表示する＞＞ページリンクを表示する＞＞といった流れになります。
これにトップページだけ〇〇を表示したいとかとなると、現在表示されているページの種類（固定ページか投稿ページかアーカイブか）を条件にして、XXであるなら△を表示といったコードを追加していくことになります。
functions.php を作る
functions.php は、WordPressを自作テーマで動作させるのに必要なコードを記入するファイルです。
テーマで使用するスタイルシートの場所やJSファイルの場所、特殊なコード等を記載します。
特にアイキャッチやタイトルなどは、初期状態では有効になっていないので、投稿してもアイキャッチ画像が無視されます。有効にするコードを記入します。
<?php
if (!defined('ABSPATH')) exit; //不正アクセスを防ぐ
add_action('after_setup_theme', 'setup_mytheme_theme');
function setup_mytheme_theme()
{
add_theme_support('title-tag');
add_theme_support('post-thumbnails');
add_theme_support('widgets');
}これで最低限動作するコードが記入できました。
管理画面のテーマで、このテーマを選ぶと表示されるようになります。
デザインをCSSとindex.phpのタグに記載して、完成となります。
ページに応じて色々カスタマイズしたいのであれば、上記の図に従って、必要なファイルを作成します。
個別の投稿ページであれば、single-post.phpを作成し、投稿内容を記載するコードを書くことになります。
色々試して、自身専用のテーマを作成してください。