WordPressの子テーマを作るときのひな型テンプレートがあるんですが…

ウェブコーディング

WordPressのカスタムをするときは子テーマを使った方が効率的で、もとのテーマを傷つけることもないです。

子テーマ自体は簡単な構造なのでその都度、調べて作るというのもいいのですが、それも面倒だなと思って、必要な箇所を抜粋して使いまわせる子テーマのテンプレートを作ってみました。

結構前に作ったものなのですが、自分でもいまだに使っています。

子テーマのフォーマットをいちいち調べ直さなくても良いので、意外と便利かもしれません。

テンプレートダウンロード

アイコン
【ZIP】WordPress子テーマテンプレート

収録内容は以下のとおりです。

  • readme.txt(使い方の説明)
  • functions.php(独自関数定義用PHPファイル)
  • style.css(子テーマ定義用のスタイルシート)
  • screenshot.png(テーマ一覧で表示される画像)
ライセンス

クリエイティブ・コモンズ・ライセンス
この 作品 は クリエイティブ・コモンズ 表示 - 継承 4.0 国際 ライセンスの下に提供されています。

テンプレートの使い方

子テーマとしては機能するには、フォーマットを整形した「style.css」さえあればいいのですが、自分の使いやすいように作ってあるのでちょっとだけ機能が追加されています。

  • パスワード保護中のページの「保護中:」を消す
  • 再ログインまでの時間の延長

この辺りを追加しています。

style.cssの仕様と使い方

親テーマの指定や子テーマの名前をつけたり、バージョン情報を入力したりできます。

子テーマとして機能するための部分とそうでない部分があるので、必要ないと思ったら削除して構いません。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name: child
Template: parent
Description: parentの子テーマ
Author: 作者
Author URI: 作者WEBページ
License: ライセンス
License URI: ライセンスのURL
Tags: 
Version: バージョン
---------------------------------------------------------*/
@import url('../親テーマフォルダ/style.css');

/* ---------------------------------------------------------
	ここから下に追加のCSS設定を記載する 
--------------------------------------------------------- */

この中で子テーマとして最低限必要な部分を抜き出すとこうなります。

@charset "UTF-8";
/*---------------------------------------------------------
Theme Name : 子テーマの名前
Template : 親テーマの名前
---------------------------------------------------------*/
@import url('../親テーマフォルダ/style.css');

作者・ライセンス・タグ・バージョン情報は必須ではないので、おこのみで使ってください。

「style.css」のもう一つの使い方として、追加のCSSを設定することができます。

CSSは後に読み込まれた設定がページ上で反映されるので、追加のCSSを書くときは親テーマのCSSを読み込んだ後ろに書きます。

@import url('../親テーマフォルダ/style.css');

この部分の下にかけばOKということです。

functions.phpの仕様と使い方

単にCSSのカスタムだけなら必要ないんのですが、フィルターフックを追加したり、画像サイズを別に設定する場合などはfunctions.phpを利用します。

このテンプレートでは「保護中:」の表示を消すためのフィルターフックとログインの期限を設定しています。

<?php

/* ここに新しく追記 */

/* 「保護中:」を消すfunction */
add_filter('protected_title_format', 'remove_protected');
function remove_protected($title) {
       return '%s';
}


/* パスワードを入力した後再入力を求めるまでの期間を指定 */
/* HOUR_IN_SECONDS = 1時間  */
/* 2 * HOUR_IN_SECONDS = 2時間  */
/* DAY_IN_SECONDS = 1日  */
/* 30 * MINUTE_IN_SECONDS = 30分  */
function custom_postpass_time() {
    require_once ABSPATH . 'wp-includes/class-phpass.php';
    $hasher = new PasswordHash( 8, true );
    setcookie( 'wp-postpass_' . COOKIEHASH, $hasher->HashPassword( wp_unslash( $_POST['post_password'] ) ), time() + HOUR_IN_SECONDS, COOKIEPATH );
    wp_safe_redirect( wp_get_referer() );
    exit();
}
add_action( 'login_form_postpass', 'custom_postpass_time' );

?>

必要があれば、その都度編集して行けばOKです。

必要ないと思ったらファイルごと削除してもなんにも差し支えがないのでご安心を。

readme.txtについて

このファイルは子テーマとしては必要ありません。

子テーマを配布するにあたって、使い方などの必要なことを書いてあるので良かったら目を通してください。

あとがき

子テーマを利用するのは、簡単にカスタムできて、失敗したと思ったらすぐに元のテーマに戻せるところが魅力的です。

ただ、WordPressのカスタマイズをするときは、元のテーマのレイアウトなどは変えずに、ヘッドラインなどの記事本体の部分的な変更だけにしておいたほうが吉です。

WEBデザイン経験が豊富で、綺麗なWEBサイトを作れるのであれば別ですが、デザイナーが本気で作ったテンプレートをいじってもあまり良い結果にはなりません。

特に当サイトで使用している「MAG(TCD036)」のような、目的特化型の洗練されたテーマはデフォルトのまま使うことが一番だと思います。

このクオリティは国産テーマではNO.1でしょうね。

というわけで、テーマのカスタムは程々にしておきましょう。

tipLog

tipLog

inkscape・GIMPを使ったデザインお勉強ブログ。WordPressなどのウェブ関連のお勉強もしています。2019年6月にInkscapeの書籍を出版しました。 現在は個人事業主向けのホームページやブログ導入のお手伝いをしています。

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


tipLog

tipLog

inkscape・GIMPを使ったデザインお勉強ブログ。WordPressなどのウェブ関連のお勉強もしています。2019年6月にInkscapeの書籍を出版しました。 現在は個人事業主向けのホームページやブログ導入のお手伝いをしています。

Inkscapeの入門書

ランキング

  1. inkscapeで取り込んだJPGやPNG画像をトリミングをする方法

  2. inkscapeで「フチ文字」を作る方法2つ+ちょっとした応用

  3. inkscapeの基本機能だけで矢印を描く方法

  4. PHPでデータベースから取得した配列を加工する方法

  5. 超簡単!inkscapeで直角三角形を作る方法

  6. inkscapeの使い方を集めたスキルアップのための日本語チュートリアル集

  7. inkscapeの「整列と配置」でオブジェクトを綺麗に並べて表を作る方法

inkscapeを学ぶ

TOP