bluediary

- プログラミングと中小企業診断士の勉強について

2022.04.04

2023.01.02

Web制作

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

Soichiro

Web制作会社でデザインやコーディングを担当しています。趣味は筋トレ、お絵描き、旅行です。

プロフィール詳細へ

Archive