WordPress の 子テーマ作成とカスタマイズ

Wordpress-icon

子テーマを作してして WordPress のオリジナルテーマをカスタマイズ

WordPress のオリジナルテーマ では テーマのカラー や フォント などは CSS の編集が必要で、カスタマイズの内容によっては PHP の編集も必要になる。

CSS ( Cascading Style Sheets ) は 文章の 体裁 や 文字装飾 などの仕様書 で、PHP は プログラミング言語で 動的に ウェブページを作成できる。

WordPress Child Themes-013

PHP は サーバ側で プログラムの処理が行われるため 記述ミスをすると 最悪の場合 エラーが発生した PHP と行数が表示されるだけで  WordPress の管理画面にすらログインできない事態に陥ってしまう。

FTP の設定と バックアップ

CSS や PHP を編集する前に サーバ側で FTP の設定を行い FTP クライアントソフト で WordPress がインストールされているフォルダにアクセスして バックアップを行う。

WordPress Child Themes -35

使用している サーバの管理パネルに アクセスして「 FTP アカウント 」の設定を行い 「 FTP ユーザー名 」と「 パスワード 」を取得。

WordPress Child Themes 016

FileZilla Client などの FTP クライアントソフト を使用して WordPress がインストールされているフォルダにアクセスする。

FileZilla-icon

FileZilla Client のインストールと使い方

ウェブサーバにアクセスしてファイルの送受信を行う オープンソースの無料 FTPクライアントソフト FileZilla Client は ドイツの Tim Kosse 氏のチームが開発している オープンソース の FTP […]

WordPress Child Themes 3

XFREE では 直接 WordPress のフォルダが開くが、使用しているサーバによって WordPress がインストールされているフォルダの位置は異なり、XServer では ドメインフォルダ内 にある「 public_html 」フォルダになる。

WordPress Child Themes 5

「 wp-content 」内にある「 theme 」フォルダの中に 現在インストールされているテーマのデータがあり、各テーマのフォルダ内に テーマの style.css や phpファイルが格納されているので 編集を行う前に テーマをバックアップする。

子テーマの作成

テーマは 不具合修正 や 機能の追加などで 更新されるため テーマを直接編集すると 更新時に上書きされ スタイルシートが初期化されるが、子テーマを作成すると 親テーマ の データをロードした後 子テーマを ロードするので 子テーマの内容に上書きされて ページが表示される。

子テーマは 親テーマのフォルダ内に作成して 親テーマと関連付けする「 style.css 」と「 functions.php 」を子テーマ フルダ内に保存する。

WordPress Child Themes 003

FileZilla などの FTP クライアントアプリを使用して WordPress がインストールされているサーバにアクセスし「 wp-content 」の「 themes 」を開き 子テーマを作成する テーマのフォルダ名を確認。

/*
Theme Name: twentysixteen-child
Template: twentysixteen
Version: 1.0.0
*/

デスクトップなど任意の場所に「 テーマ名-child 」フォルダを作成後  Brackets などの テキストエディタに 上記の項目を入力して「 style.css 」というファイル名で 作成した「 テーマ名-child 」フォルダに保存。

「 Theme Name 」には 作成した「 テーマ名-child 」フォルダ名 , 「 Template 」は サーバの「 themes 」フォルダで確認した 親テーマのフォルダ名を 大文字・小文字も一致させて入力。
<?php 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’) ); } ?>

テキストエディタに 上記のコードを貼り付けて 「functions.php」というファイル名で作成した「 テーマ名-child 」フォルダに保存。

WordPress Child Themes 001

FTP クライアントアプリを使用して「 テーマ名-child 」フォルダ を「 wp-content 」内の「 themes 」フォルダにアップロード。

WordPress Child Themes 006

WordPress の 管理画面で「 外観 」→「 テーマ 」に アップロードした「 テーマ名-child 」が表示されているはずなので「 有効化 」する。

子テーマ作成のプラグイン

現在は 子テーマ作成の プラグインが公開されているので インストールするだけで 簡単に子テーマを作成できる。

Child Theme Configurator

デザイン 編集

作成した子テーマを有効にしたら スタイルシートに 記述して 体裁 や デザインの修正をする。

スタイルシートの記述は テーマによって異なるので 親テーマの「 style.css 」を参考にして 変更したい箇所を 子テーマに追加していく。

start-wordpress-015

CSS は「 外観 」の「 カスタマイズ 」にある「 追加 CSS 」に 修正が必要な部分を追加する。

WordPress オリジナルテーマ 「 Twenty-Sixteen 」の 修正例

WordPress の オリジナルテーマ は 記述が似ているので 他の オリジナルテーマでも応用できる。

/* 本文のフォント*/
body, button, input, select, textarea {

color: #1a1a1a; font-family: “メイリオ”,Meiryo,”ヒラギノ角ゴ Pro W3″,Hiragino Kaku Gothic Pro,”MS Pゴシック”,sans-serif;
}
/* 見出し*/
.entry-content h1,
.entry-summary h1,
.comment-content h1,
.textwidget h1 {
font-size: 1.5em;
color: #1B1B1B;
font-weight: normal;
line-height: 1em;
border-left: 10px solid #515151;
padding: 5px 10px;
margin-top: 1.250em;
margin-bottom: 3.125em;
}
/*ウィジェットの体裁修正*/
.widget {

border-style: none;
font-size: 0.85em;
line-height: 1.7em;
margin-bottom: 1em;
}
/*次の投稿 消去*/
.post-navigation {
display: none;
}
/*リンクの下線消去*/
a:link {
box-shadow: none;
}
a:visited {
box-shadow: none;
}
a:hover {
box-shadow: none;
}
「 Twenty-Sixteen 」のメタ情報の削除

投稿ページに表示される「 作成日 」「 作者 」などの メタ情報は PHPの編集が必要で CSS と同じように 編集したファイルは 子テーマに保存する。

「 Twenty-Sixteen 」の メタ情報 は 「 content-single.php 」に記載されているので、FTPクライアント アプリで 親テーマの「 twentysixteen 」フォルダ内にある「 template-parts 」フォルダから「 content-single.php 」ファイルをダウンロードし、子テーマの「 twentysixteen-child 」フォルダ内に 「 template-parts 」フォルダを新規作成する。

<footer class=”entry-footer”>
<?php twentysixteen_entry_meta(); ?>
<?php
edit_post_link(
sprintf(
/* translators: %s: Name of current post */ __( ‘Edit<span class=”screen-reader-text”> “%s”</span>’, ‘twentysixteen’ ), get_the_title()
),
‘<span class=”edit-link”>’,
‘</span>’
);
?>
</footer>

「 content-single.php 」をテキストエディタで開き 上記の箇所を 非表示にするか 削除後 ファイルを 子テーマの「template-parts」フォルダにアップロードする。

国産の WordPressテーマ COCOON

COCOON は わいひら氏が 開発している 無料のテーマで、WordPress のオリジナルテーマ を使用する際に プラグインで追加する機能を多く実装し、PHP の編集が必要な箇所も「 設定 」で変更が可能な シンプルでカスタマイズしやすい ユーザーフレンドリーな テーマになっており、利用者も多く フォーラムも日本語なので ビギナーでも安心して利用できる。

COCOON 公式サイト

COCOON は WordPress の管理パネルにある「 外観 」の「 新しいテーマを追加 」で表示される テーマリストには含まれていないので 公式サイトから テーマをダウンロードして インストールが必要。

関連記事

Ad-Inserter-Pro-icon

Ad Inserter の設定と使い方

柔軟な表示設定ができるWordPress 用の広告管理プラグイン Ad Inserter は WordPress 用の広告管理プラグインで、無料版でも 広告を表示するデバイス の指定 や 見出し・コンテンツ・コメントなど […]

AICP-icon

Ad Invalid Click Protector の使い方

広告の不正クリック防止プラグイン Ad Invalid Click Protector ( AICP ) は 広告の異常クリックを無効化する オープンソースの WordPress のプラグインで、アドセンス狩り 対策とし […]

Wordpress-icon

ビギナーが始めるワードプレス

ウェブ制作 初心者でも できる WordPress WordPress は世界的に人気がある オープンソースのブログプラットフォームで、WordPress のシステム要件を満たしたサーバであれば インストールして使用でき […]

Wordpress-icon

WordPress の 子テーマ作成とカスタマイズ

子テーマを作してして WordPress のオリジナルテーマをカスタマイズ WordPress のオリジナルテーマ では テーマのカラー や フォント などは CSS の編集が必要で、カスタマイズの内容によっては PHP […]