カテゴリー
WordPress

【WordPress】Twenty Seventeen の子テーマ作り記録♪

去年の、【WordPress】TwentySixteen の子テーマ作り記録♪ – oki2a24 と同様、WordPress の公式テーマ TwentySeventeen をベースとした子テーマを作り、切り替えました♪

その内容を、ノートいたします！

全体を通して参考にしたページ

準備。親テーマとなる Twenty Seventeen のインストール

  1. テーマ > 新規追加 > 「Twenty Seventeen」で検索 > インストール

準備。必要最低限の子テーマを作成

子テーマ必要最低限のディレクトリとファイルの作成

# テーマ配置場所に移動
cd /var/www/html/oki2a24.com/wp-content/themes

# 子テーマディレクトリ、最低限のファイルを作成
mkdir oki2a24com-twentyseventeen-child
touch oki2a24com-twentyseventeen-child/style.css
touch oki2a24com-twentyseventeen-child/functions.php
chown -R nginx:nginx oki2a24com-twentyseventeen-child/

# 移動
cd oki2a24com-twentyseventeen-child/

子テーマのスタイルシート (style.css) の最低限の記述

/*
 Theme Name:   oki2a24.com, Twenty Seventeen Child
 Theme URI:    https://oki2a24.com/
 Description:  Twenty Seventeen テーマを基にした子テーマです。
 Author:       oki2a24.com
 Author URI:   https://oki2a24.com/
 Template:     twentyseventeen
 Version:      1.0
*/

functions.php を編集して親テーマのスタイルシートをキューに入れる

<?php
/**
 * JavaScript や CSS を読み込みます。
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

準備。ログインしている時だけ、新しいテーマが適用されるように設定

  1. プラグイン > 新規追加 > 「WP Theme Test」で検索 > インストール > 有効化
  2. 外観 > Theme Test Drive
  3. 次を入力し、[変候を保存]
    • テストテーマ: oki2a24.com, Twenty Seventeen Child
    • 現在の状態: On
    • 表示する権限グループ: 管理者
    • パラメーター機能: 無効
    • IP Adress: 未記入のまま

準備。子テーマのコードを Git でバージョン管理開始する

git init
git add -A
git commit -m "必要最低限の子テーマを作成する"

ここで作成した Git リポジトリを以後、Git ローカルリポジトリと呼ぶこととします。

準備。子テーマのコードを GitHub にホストする

https://github.com にログインし、リポジトリを新規作成する。

  • Repository name: oki2a24com-twentyseventeen-child
  • Description: WordPress の Twenty Seventeen テーマを基にした子テーマです。
  • [x] Public
  • [x] Initialize this repository with a README
  • Add .gitignore: None
  • Add a license: MIT license
    Create repository

GitHub のリモートリポジトリを登録する

作成された GitHub リポジトリのウェブページで、[Clone or downlod] をクリックして URL をコピーしました。

そして、Git ローカルリポジトリで次の操作をいたしました♪

# GitHub リポジトリを登録
git remote add origin https://github.com/oki2a24/oki2a24com-twentyseventeen-child.git

# GitHub リモートリポジトリ内容をダウンロード
git fetch origin

# ローカルリポジトリとリモートリポジトリをマージ
git merge --no-ff origin/master

# GitHub リモートリポジトリへマージした内容を反映
git push origin master

この時点の子テーマのコード

子テーマカスタマイズ 1. more タグで URL 末端に付く #more-xxxx を削除

次を追記しました。

/**
 * more タグで URL 末端に付く #more-xxxx を削除します。
 */
function remove_more_link_scroll( $link ) {
        $link = preg_replace( '|#more-[0-9]+|', '', $link );
        return $link;
}
add_filter( 'the_content_more_link', 'remove_more_link_scroll' );

この時点の子テーマ全体のコード

テーマカスタマイズ 2. Proudly powered by WordPress を消して著作権（コピーライト）を表示

cp -a ../twentyseventeen/footer.php fotter.php

コードを見てみると、fotter.php でコピーライトを表示しておりませんでした。調べて見ますと、template-parts/footer/site-info.php にございました！TwentySixteen から変わりましたわね♪

mkdir -p template-parts/footer/
chown -R nginx:nginx template-parts/
cp -a ../twentyseventeen/template-parts/footer/site-info.php template-parts/footer/site-info.php

次のように修正しました。

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info">
        <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->

↓

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info">
        &copy;<?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php echo bloginfo( 'name' ); ?></a>
</div><!-- .site-info -->

ここまでのコード全体

テーマカスタマイズ 3. ヘッダー画像の変更

inc/custom-header.php を見ますと、ヘッダー画像について分かりました。

  • ヘッダー画像サイズ: 幅 2000 px x 高さ 1200 px
  • ヘッダー画像: twentyseventeen/assets/images/header.jpg

3-1. ヘッダー画像をアップロードして配置

assets/images/header.jpg がヘッダー画像です。子テーマでは複数指定したく存じますので assets/images/headers というディレクトリを作成し、そこに置くことといたしました。

# ヘッダー画像配置ディレクトリを作成
mkdir -p assets/images

# /tmp/headers に事前にアップロードしていたヘッダー画像を置いた。
mv /tmp/headers/ oki2a24com-twentyseventeen-child/assets/images/

# 所有者変更
chown -R nginx:nginx assets/

3-2. アップロードしたヘッダー画像を使用するようにコード修正

  • 今までサムネイル画像を別途アップしていたが、親テーマの TwentySeventeen では同じ画像を使用していたため、合わせた。
  • unregister_default_headers で親テーマのヘッダー画像を表示候補から削除した。
    • 20 〜 30 回ほど表示して、親テーマヘッダー画像が表示されないことを確認できた。
    • しかし、外観 > カスタマイズ > ヘッダーメディア > おすすめ、に依然として表示され続けてしまう。
/**
 * 親テーマのセットアップに追加する処理を定義します。
 */
function remove_twentyseventeen_headers() {
    // デフォルトヘッダー画像登録を削除
    unregister_default_headers( array(
        'default-image'
    ) );
}
add_action( 'after_setup_theme', 'remove_twentyseventeen_headers', 11 );

function oki2a24_twentyseventeen_child_setup() {
    // デフォルトヘッダー画像を設定
    register_default_headers( array(
        'P1010303' => array(
            'url' => '%2$s/assets/images/headers/P1010303.jpg',
            'thumbnail_url' => '%2$s/assets/images/headers/P1010303.jpg',
            'description' => 'P1010303'
        ),
        'PC312989' => array(
            'url' => '%2$s/assets/images/headers/PC312989.jpg',
            'thumbnail_url' => '%2$s/assets/images/headers/PC312989.jpg',
            'description' => 'PC312989'
        ),
        'R0013152' => array(
            'url' => '%2$s/assets/images/headers/R0013152.jpg',
            'thumbnail_url' => '%2$s/assets/images/headers/R0013152.jpg',
            'description' => 'R0013152'
        )
    ) );
}
add_action( 'after_setup_theme', 'oki2a24_twentyseventeen_child_setup' );

参考ページ

ここまでのコード全体

テーマカスタマイズ 4. アルファベットの大文字化指定の無効

アルファベット小文字で書いていても自動的に大文字化されてしまう箇所がございます。

その中で次の箇所は大文字化を無効にいたしました。

  • ウェブサイトのタイトル
  • 投稿者
  • カテゴリーやタグ

4-1. 子テーマのスタイルシートを読み込むように設定

wp_enqueue_style( 'child-style', ... 部分を追加しました。

CSS は修正してもキャッシュが効いてすぐには変更が確認できないため、開発中の間は最後から 2 つめの引数、バージョン、を ‘test’ など適当な文字列に都度変更して確認いたしました。

別の修正が今後入ることを見越して楽に引数を変更できるようにするために、この部分以降の引数はデフォルト値を入れておきますわ♪

/**
 * JavaScript や CSS を読み込みます。
 */
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style'),
        false,
        'all'
    );
}

4-2. 子テーマスタイルシートの編集

単純に text-transform: uppercase; を含む CSS を上書きするだけですの。

.site-title {
        clear: none;
        font-size: 24px;
        font-size: 1.5rem;
        font-weight: 800;
        line-height: 1.25;
        letter-spacing: 0.08em;
        margin: 0;
        padding: 0;
        text-transform: none;
}

.entry-meta {
        color: #767676;
        font-size: 11px;
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.1818em;
        padding-bottom: 0.25em;
        text-transform: none;
}

.entry-footer .cat-links,
.entry-footer .tags-links {
        display: block;
        font-size: 11px;
        font-size: 0.6875rem;
        font-weight: 800;
        letter-spacing: 0.1818em;
        padding-left: 2.5em;
        position: relative;
        text-transform: none;
}

参考ページ

ここまでのコード全体

テーマカスタマイズ 5. 投稿日に加えて更新日も表示する

  • 更新日が非表示なのを表示する。
  • 投稿日の前に、”投稿: ” を追加する。
  • 投稿日の後に、”, ” を追加する。
  • 更新日の前に、”更新: ” を追加する。
.published:before {
        content: "投稿: ";
}
.published:after {
        content: ", ";
}
.updated:not(.published) {
        display: inherit;
}
.updated:before {
        content: "更新: ";
}

参考ページ

ここまでのコード全体

テーマカスタマイズ 6. ナビゲーションメニューに検索フォームを追加

そもそもメニューをテーマに追加させる必要がございます。これはプログラミング不要で管理メニューから設定いたします。

  1. 外観 > メニュー
  2. なければ「メニューを編集」から新規メニュー作成
  3. 「位置の管理」で Primary Menu に先ほどのメニューを指定して「変更を保存」

検索メニューは管理画面から追加できませんので、次のコードを追加して表示させました。

/**
 * メニューに検索フォームを追加します。
 */
function add_search_box_to_menu( $items, $args ) {
    if( $args->theme_location == 'top' ){
        return $items . '<li>' . get_search_form(false) . '</li>';
    }
}
add_filter( 'wp_nav_menu_items', 'add_search_box_to_menu', 10, 2);

参考ページ

ここまでのコード全体

これで、変更のほとんどが完了しました！残りは、実際にテーマを切り替えたり、少し残作業をしたりでおしまいの予定ですわ！

ログインしている時だけ、新しいテーマが適用されるようにした設定を解除し、作成した子テーマに切り替える

ログイン中のテーマ切り替えをオフに

  1. 外観 > Theme Test Drive
  2. 次を設定し、[変候を保存]
    • 現在の状態: Off

テーマを変更

  1. 外観 > テーマ
  2. oki2a24.com, Twenty Seventeen Child の [有効化] をクリック

ヘッダー画像をランダム設定

  1. 外観 > カスタマイズ
  2. ヘッダーメディア
  3. おすすめヘッダーをランダム表示
  4. 保存して公開

テーマのサムネイルを作成

  • 親テーマの screenshot.png は、幅 1200 x 900 px

ですので、きちんと上記の大きさで作成したほうがよいことは言うまでもありません！

ですけれども横着して画面いっぱいに表示したものを切り抜いて使用いたしました、てへ♪

そのままではサイズが 3.5 MB 程度と、大変大きかったですので、[png 圧縮] で検索して、次のサービスで 357 KB まで小さくいたしました。

その後、作成した screenshot.png を scp コマンドでアップいたしました。

最後に、外観 > テーマから、サムネイルが設定されていることを確認して、完了です！

ここまでのコード全体

おわりに

子テーマのリポジトリですわ。

今回、Git でブランチを派生させながら作業いたしました。

途中で行き詰まった作業は後回しにするといったことがやりやすかったですわ！

以上です。

「【WordPress】Twenty Seventeen の子テーマ作り記録♪」への1件の返信

コメントを残す