静的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'); ?>