静的htmlファイルをWordPressテーマ(独自テーマ)にする手順

この記事では静的htmlファイルをWordPress(以下WP)のテーマにする手順を紹介します。
全てのhtmlファイルを.phpに直す
〇〇.htmlというファイル名を全て〇〇.phpに書き換えます。(例:index.html → index.php)
style.cssファイルを作る
index.phpと同じ階層に「style.css」を作り、そこに下記を記入します。
/*
Theme Name: テーマ名 ←ここにテーマ名を入れます
Author: Author Name ←ここに制作者名を入れます
*/
WPの必須タグをindex.phpに入れる
</head>の直前に <?php wp_head(); ?> を追加
<link rel="stylesheet" href="./common/css/style.css">
<?php wp_head(); ?>
</head>
</body>の直前に <?php wp_footer(); ?> を追加
<script src="./common/js/common.js"></script>
<?php wp_footer(); ?>
</body>
これで管理ツールバーが表示されるようになります。
header.phpとfooter.phpファイルを作る
header.php
index.phpファイルと同じ階層にheader.phpファイルを作ります。
index.phpファイルの<head>タグの中身を、header.phpへコピペします。
<meta charset="UTF-8">
<title>bluediary</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="プログラミングや中小企業診断士の勉強について">
<meta property="og:title" content="bluediary | プログラミングや中小企業診断士の勉強について">
<meta property="og:type" content="article">
<meta property="og:description" content="プログラミングや中小企業診断士の勉強について">
<meta property="og:url" content="https://bluediary.net/">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/common/css/style.css">
<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/common/image/bluediary.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/common/apple-touch-icon-180x180.png">
<?php wp_head(); ?>
header.phpにコピペした後、index.phpには<head>ダグ内を削除して代わりに<?php get_header(); ?> と書きます。
<head>
<?php get_header(); ?>
</head>
こうすることで、index.php と書いた箇所に header.phpの内容が読み込まれます。
footer.php
footer.phpを作り、作ったfooter.phpに</body>タグの直前(js読み込みのところ)までをコピペして footer.phpに貼ります。
<!-- ここから -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="./common/js/main.js"></script>
<?php wp_footer(); ?>
<!-- ここまで -->
</body>
index.phpには削除して代わりに <?php get_footer(); ?>を書きます。
<?php get_footer(); ?>
</body>
その他汎用ソースコードをパーツファイル化する
header.phpやfooter.php以外に共通化したいソースコードをパーツファイル化することができます。
WordPressではソースコードをパーツに分割することができます。例えば、header や footerなどサイト全体に共通する部分をパーツに分割することで、1箇所修正すれば、全体に反映されるので、運用がしやすくなります。
好きな名前でフォルダを作ります。例えば「parts」という名前でフォルダを作り、その中にheader.phpというファイルを作ります。parts>header.phpには、ヘッダーナビゲーションの部分のコードをコピペします。
<header class="header">
<div class="header-container">
<h1 class="header-logo">
<p class="logo-title"><a href="">bluediary</a></p>
<p class="logo-subtitle">- プログラミングと中小企業診断士の勉強について</p>
</h1>
〜〜〜〜〜
〜〜〜〜〜
</div>
</header>
コピペした後のindex.phpには <?php get_template_part(“parts/header”); ?> を貼り付けます。※”parts/header.php”とはしません。
<?php get_template_part("parts/header"); ?>
WPでcssやjsを適用させる(相対パスから絶対パスへ)
WordPressでこれらファイルを読み込ませる為に”<?php echo get_template_directory_uri(); ?>”を書きます。
<link rel="stylesheet" href="./style.css" type="text/css" />
↓
↓
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css" type="text/css" />
<?php wp_head(); ?>
jsファイルも同様にパスの先頭に”<?php echo get_template_directory_uri(); ?>”を書きます。
<script type="text/javascript" src="./common/main.js"></script>
↓
↓
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/common/main.js"></script>
<?php wp_footer(); ?>
これで、読み込まれるようになりました。画像も同様です。
投稿記事の表示について
いくつかの投稿記事が表示される部分を実装します。
投稿記事を表示させるには「投稿記事があるかどうかを判別するif文」と「その記事を複数件表示させるためのループ文」を書く必要があります。
まずは完成形のコードが下記です。
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
//ここに投稿記事を書く
<?php endwhile; ?>
<?php endif; ?>
少しコードの説明をします。下記が投稿記事があるかどうかを判別するif文のソースです。
<? if(have_posts()): ?>
//投稿記事がある場合
<?php else: ?>
//投稿記事がない場合
<?php endif;?>
<? if(have_posts()): ?>は記事があるかどうかを表すif文になります。
(※<?php else : ?>は省略可能です。)
if文最後は必ず<?php endif; ?>を書いてif文を閉じます。
次に投稿記事がある場合、「その記事を複数件表示させるためのループ文」を書きます。ループはwhile文で表します。
<?php while (have_posts()) : the_post(); ?>
//この中に複数件表示させる投稿記事を書きます。
<?php endwhile; ?>
<?php while (have_posts()) : ?>は投稿記事がある場合、while文がtrueとなり、中身の記事を表示することができます。
しかし、これだけだと、同じ投稿をループで何度も表示させてしまい、次の投稿記事を表示しません。
そこでwhile文の中に the_post();を書いて、次の投稿記事を表示できるようにします。
そして、最後に必ず<?php endwhile; ?>を書いて閉じます。
投稿記事の表示でよく使うWordPressタグ
タイトル
<?php the_title(); ?>
日付
同じ投稿日の日付は出ない | <?php the_date(); ?> |
同じ投稿日の日付も出る | <?php the_time(“Y/m/d”); ?> |
更新日の日付を出す | <?php the_modified_date(“Y.m.d”); ?> |
抜粋
<?php the_excerpt(); ?>
投稿ページのリンクをつける
<?php the_permalink(); ?>
サムネイル表示
<?php the_post_thumbnail(); ?>
カテゴリ名
<?php $category = get_the_category(); $cat_name = $category[0]->cat_name; echo $cat_name; ?>
ページネーションタグ
<?php the_posts_pagination(
array(
'mid_size' => 2, // 現在ページの左右に表示するページ番号の数
'prev_next' => true, // 「前へ」「次へ」のリンクを表示する場合はtrue
'prev_text' => __(''), // 「前へ」リンクのテキスト
'next_text' => __(''), // 「次へ」リンクのテキスト
'type' => 'list', // 戻り値の指定 (plain/list)
)
); ?>
投稿ページ(single.php)を完成させる
投稿のデータ出力するときには、(たとえ一件のみでも)必ずループを書きます。
(ループはWPの用語で投稿の各データを取り出す間のことです)
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
ここに詳細ページのコンテンツが入ります。
<?php endwhile; ?>
<?php endif; ?>
タイトル
<?php the_title(); ?>
本文
<?php the_content(); ?>
サムネイルを登録したい→functions.phpを作成
functions.phpに 以下ソースコードを書きます
<?php
add_action('init', function(){
add_theme_support('post-thumbnails');
});
?>
Single.phpページの仕上げ
<html lang="ja"> → <html <?php language_attributes(); ?>>
<body> → <body <?php body_class(); ?>>
<body <?php body_class(); ?>> の直下に <?php wp_body_open(); ?>
投稿タイプを増やす(カスタム投稿タイプの作り方)
例えば、製品という名前のカスタム投稿タイプを作りたい場合、functions.phpファイルに以下のソースコードをコピペします。
<?php
add_action('init', function(){
register_post_type('item',[
'label' => '製品',
'show_in_rest' => true,//旧エディターから新エディターへ
'public' => true
]);
});
?>
カスタム投稿タイプにカテゴリを追加できるようにする
functions.phpに 以下ソースコードを書きます
add_action('init', function(){
register_taxonomy('gerne','works',[
'label' => '製品カテゴリー',
'hierarchial' => true,
]);
カスタムフィールドを表示させる
functions.php 内の supports に custom-fields を追加します。
<?php
add_action('init', function(){
register_post_type('item',[
'label' => '製品',
'show_in_rest' => true,//旧エディターから新エディターへ
'supports' => ['thumbnail','title','editor','page-attributes','custom-fields'],
'public' => true
]);
});
?>
その後、投稿編集画面から‥をクリックして、オプション→カスタムフィールドを表示させます。
カスタム投稿を表示させたい場所に<php? get_post_meta(‘フィールド名’) ?> を書いて、表示させます。
ページネーションを表示させるタグ
- <?php next_posts_link(); ?>
- <?php get_next_posts_link(); ?>
アーカイブページの作成
- アーカイブのタイトル(カテゴリー名)→ <?php wp_title(”); ?>
グローバルメニューを設定する
functions.php 内の 下記をコピペします。
register_nav_menus([
'global_nav' => 'グローバルナビゲーション'
]);
その後表示させたい場所に
<?php wp_nav_menu(); ?> を書きます。
ヘッダーメニュー一覧を表示
<?php wp_nav_menu(); ?>
カテゴリー一覧を表示
<?php wp_list_categories('title_li='); ?>
日付アーカイブ一覧を表示
<?php wp_get_archives('post_type=post&type=monthly&show_post_count=1'); ?>