A3 Code Note

09/19/2022

HTMLサイトのWordPress化

HTMLを用意

WordPress化したいHTMLサイトを用意
（以下簡易的なサンプルコードを記載）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
    <header></header>
    <main></main>
    <nav></nav>
    <footer></footer>
</body>
</html>

慣れてきたら、HTMLを用意せず、最初からパーツ化したPHP（テンプレートファイル）を作成して、その中に記述していきます。

共通部分のパーツ化＆パースの読み込み

  1. index.html を、index.php(複数ページあるときはfront-page.php)と拡張子を書き換える
  2. それぞれパーツ化する(header.php, footer.phpなど)
  3. インクルードタグを使って先ほど作ったパーツを読み込む
    ヘッド：　　　<?php wp_head(); ?>
    ヘッダー：　　<?php get_header(); ?>
    サイドバー：　<?php get_sidebar(); ?>
    フッター：　　<?php get_footer(); ?>
  4. システムファイルを読み込む
    headが終わる前に　<?php wp_head(); ?>
    bodyが終わる前に　<?php wp_footer(); ?>

header.php :

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>タイトル</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
    <?php wp_head(); ?>
</head>
<body>
    <header>
        <h1>タイトル</h1>
    </header>

index.php

<?php get_header(); ?>
    <main>
    </main>
<?php get_sidebar(); ?>
    <nav>
    </nav>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

footer.php
JavaScriptを読み込ませるときは<?php wp_footer(); ?>より上に書きましょう。
<?php wp_footer(); ?>が、bodyの一番下にくるようにします。

    <footer>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

テーマのアップ・有効化

テーマの場所：
wp-content > themes
この中にindex.phpなどが入ったフォルダをアップ
フォルダ内必須：

  • index.php
  • style.css

その他フォルダ内に入りそうなもの：

  • header.php
  • sidebar.php
  • footer.php
  • page1.php
  • images（もしくは img）フォルダ
  • cssフォルダ

テーマの名前

テーマの名前はstyle.cssに書き込むことで決めれます。
WordPressで書く場合：
外観 > テーマエディタ

最低限必要なものはTheme Name

@charset "UTF-8";
/* Theme Name: XXXX */

その他入れる場合、以下のようなものを入れます。

@charset "UTF-8";
/*

Theme Name: XXXX
Theme URL: https://XXXXX
Description: 自分のサイト用
Author: a3
Version: 1.0.0
Licence: a3
License URI: http://www.XXXX/licenses/gpl.html

*/

テーマのサムネイルを設定

テーマのフォルダの直下に「screenshot.png」を入れればサムネイルになります。
サイズ：880px × 660px　

テンプレートタグでパスを書き換える

テンプレートタグとは、データベースから必要なデータを引っ張ってくる関数です。
パラメーターによって取得できるデータを制御できます。
css, js, 画像, リンクなどのパスをWordPress用に書き換えます。

bloginfo系

<!-- サイト名を表示 : 設定 > 一般 > サイトのタイトルが表示される -->
<?php bloginfo( 'name' ); ?>
<title><?php bloginfo('name');?> | <?php bloginfo( 'description' ); ?></title>

<!-- サイト名を表示 : 設定 > 一般 > キャッチフレーズが表示される -->
<?php bloginfo( 'description' ); ?>
<title><?php bloginfo('name');?> | <?php bloginfo( 'description' ); ?></title>

<!-- charsetをテンプレートタグで記述する場合 : utf-8 -->
<?php bloginfo( 'charset' ); ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">

<!-- langをテンプレートタグで記述する場合 : 設定 > 一般 > サイト言語 -->
<?php bloginfo( 'language' ); ?>
<html lang="<?php bloginfo( 'language' ); ?>" >

<!-- テンプレートフォルダ内のimgにアクセス -->
<?php bloginfo('url');?>
<img src="<?php bloginfo('template_url');?>/img/XXX.jpg" alt="">;

<!-- 特定のページにリンク -->
<?php bloginfo('template_url');?>
<!-- XXX.co.jp/service　だと -->
<a href="<?php bloginfo('url');?>/service"></a>

記事系

<!-- 記事のタイトルを表示 -->
<?php the_tile(''); ?>

<!-- 記事の日付を表示 -->
<?php the_date(''); ?>
<?php echo get_the_date( $format, $post ); ?>
<?php the_time( get_option( 'date_format' ) ); ?>

<!-- 記事へのリンク -->
<?php the_permalink(); ?>
<a href="<?php the_permalink(); ?>">記事を読む</a>

その他

<!-- ホームのurl : a要素でホームへ戻るhrefなどに -->
<?php echo home_url(); ?>
<a href="<?php echo home_url(); ?>">home</a>

<!-- テンプレートフォルダ内のimgにアクセス -->
<?php echo get_template_directory_uri(); ?>
<img src="<?php echo get_template_directory_uri(); ?>/img/XXX.jpg" alt="">

<!-- ページごとにbodyに違うclassをつけてくれる -->
<?php body_class(); ?>
<body <?php body_class(); ?>>

アイキャッチの入れ方

以下追記する

functions.php

<?php
add_theme_support( 'post-thumbnails' );
add_image_size( 'post-thumbnails', 400, 200, true )

index.php
サムネを入れるだけの記述

<?php the_post_thumbnail( 'post-thumbnails' ); ?>

サムネがある場合とない場合で記述を変える場合

<?php if ( has_post_thumbnail() ): ?>
<!-- サムネがある場合はここを実行 -->
<?php else: ?>
<!-- サムネがない場合はここが実行 -->
<?php endif; ?>
<?php if ( has_post_thumbnail() ): ?>
  <!-- サムネがある場合はここを実行 -->
  <?php the_post_thumbnail( 'post-thumbnail' ); ?>
<?php else: ?>
  <!-- サムネがない場合はここが実行 -->
  <img src="<?php echo get_template_directory_uri(); ?>/img/eye-catch.jpg" alt="NoImage">
<?php endif; ?>

タイトルをトップと、記事とで変える

以下それぞれに記述

functions.php

function titles() {
    $title = wp_title(' | ', true, 'right');
    if(is_home()) {
        //トップページ
        echo bloginfo('name').' | '.bloginfo( 'description' );
    } else {
        //トップページ以外
        echo $title . bloginfo('name');
    }
}

header.php

<title><?php titles(); ?></title>

投稿ページの雛形

投稿ページのひな型は「single.php」

固定ページの雛形

固定ページのひな型は「page.php」

HTMLを固定ページとして使いたい場合

  1. htmlを用意
    XXX.htm
  2. 頭に「page-」をつけて、拡張子を「.php」にします。
    page-XXX.php
  3. ダッシュボード > 設定 > パーマリンク > 「基本」以外に設定
    投稿名などで良いかと思います。
  4. WordPressで固定ページを作成
  5. ページ編集画面 > パーマリンク > URLスラッグ > page-を付ける前の名前に変更
    「XXX」と入力

リンク先は「href=”/XXX”」で反応します。

<a href="/XXX">XXX</a></li>

お知らせなどの投稿系データの出力

まずメインクエリを設定

  1. 設定 > 表示設定
  2. 「ホームページの表示」の「最新の投稿」にチェックを入れる

次に以下コードをHTMLに記述

<ul>
    <?php if(have_posts()) : while(have_posts()) : the_post(); ?>
    <li>
        <a href="<?php the_permalink() ;?>">
            <div class="date"><?php the_date(); ?></div>
            <div class="ttl"><?php the_title(); ?></div>
        </a>
    </li>
    <?php endwhile; ?>
    <?php endif; ?>
</ul>

投稿系のデータを出力

  • メインクエリを選択できるのはTOPだけ
  • サブページはその固定ページの情報がメインクエリ
<!-- サブページ -->
<?php get_header(); ?>
    <div id="content">
        <!-- そのページのメインクエリの情報を引っ張ってくるループ処理 -->
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <!-- 管理画面で登録された情報を引っ張ってくる -->
        <?php the_content(); ?>
        <?php endwhile; ?>
        <?php endif; ?>
    </div>
<?php get_footer(); ?>

テンプレートファイルの概念に従い各種ファイル作成

例として最終的にテーマファイルは以下のようなもになります。

  • archive-news.php
  • 記事一覧などのアーカイブページ (archive.php)
  • テーマフッター (footer.php)
  • トップページ (front-page.php)
  • テーマヘッダー (header.php)
  • メインインデックスのテンプレート (index.php)
  • page-company.php
  • page-contact.php
  • page-service.php
  • 個別投稿ページ、固定ページ (page.php)
  • sec-service.php
  • 投稿の記事ページ (single.php)

それぞれがテンプレートファイルと呼ばれるものです。
テンプレートファイルの特徴は２つあります。

一つ目は、特定のURLを指定したときに、そのページがどのテンプレートファイルを読み込むか決まっています。

二つ目は、さらに読み込まれるテンプレートファイルには優先順位があります。
テンプレートファイルには階層があって、読み込む優先順位が決まります。
例えば、固定ページなら次のような階層があります。

page-{slug}.php → page-{id}.php → page.php

XXX.co.jp/company
これを固定ページで作った場合で、固定ページのIDが3の場合

page-company.php → page-3.php → page.php

こういった階層を「テンプレート階層」といいます。

各ページでヘッダーのデザインが変わるとき

メニューなど一部同じで、画像だけが変わるようなものを作るとき
以下のように条件分岐タグを使用して書きます。

<header>
    <!-- 共通部分 -->
    <nav id="gnav">
        <li>トップ</li>
        <li>サービス</li>
        <li>制作実績</li>
        <li>会社概要</li>
    </nav>

    <!-- 読み込まれる画像を変える -->
    <div id="header_img">
        <?php if(is_front_page()){ ;?>
            <!-- トップページのヘッダー画像を入れる -->
        <?php }else{ ;?>
            <!-- トップページ以外のヘッダー画像を入れる -->
        <?php } ;?>
    </div>
</header>

全く別物にするときはテーマヘッダーを作成し、それをphpで読み込ませます。
例えばリクルートページを別のヘッダーにするなら、
リクルートのテーマヘッダー (header-recruit.php)を作成し、
<?php get_header(‘recruit’); ?>　で読み込ませます。

表示させる記事数

表示させる記事数は以下で設定
設定 > 表示設定 > 1ページに表示する最大投稿数