STINGER6子テーマの設定｜より具体的な使い方を説明します！
こんにちは。モカ（@mocakun_tw）です。
先日、STINGER6の子テーマの設定についての記事を書きましたが、その後、具体的な導入方法について問い合わせを頂きましたので、もう少し詳しく記事にしておきたいと思います。（カスタマイズも含みます）
モカもWrodPressを始めた頃は子テーマという言葉は知っていましたが、導入には躊躇していて実際に子テーマで運用を開始したのはSTINGER6からでごく最近の事です。でも理解してしまえばとても簡単ですし、親テーマのバージョンアップの際にもカスタマイズした内容が上書きされずにとても便利です。
STINGER6はリリースされたばかりで今後もバージョンアップが行われると思いますので、是非、チャレンジしてみて下さい！
子テーマを導入&カスタマイズ準備
子テーマの導入方法については前回記事を参照して貰えると解るかと思いますが、公式ＨＰより親テーマ & 子テーマを両方ダウンロードしてインストール後に子テーマ側を有効化すればOKです！
＜関連記事＞
STINGER6子テーマの設定｜作者ENJIさんの気づかいが凄い！
尚、子テーマがインストールされているディレクトリ（フォルダ）は、Xserverであれば「/ドメイン/public_html/wp-content/themes/stinger6child」となります。「ドメイン」部分は皆さんのブログのドメインになっているかと思います。
子テーマ「stinger6child」のファイルのおさらい
こちらも前回のおさらいですが、子テーマ内にデフォルトで合計4つのファイルが入っています。
- stlye.css
- functions.php
- screenshot.png
- Readme.txt
きちんとファイルがありますよね？ここまでで子テーマの基本的な要素は満たされている訳です。
子テーマにファイルをアップロードにはFTPソフトを利用
ここからは少し具体的なお話しですが、子テーマにて運用する為には「stlye.css」や「phpファイル」を該当のディレクトリ（フォルダ）内にアップロードする必要があります。style.cssはデフォルトでフォイルが同梱されていますが、phpファイルをカスタマイズする際には親テーマよりコピーしてアップロードする必要があります。
その際にはFTPソフトを利用する事になりますが、モカは「FileZilla」というソフトを利用しています。無料でwindows10でも動くのでこちらのソフトを選択しました。尚、windows8やMacなどのOSの場合は他のソフトでも問題無いかと思います。vectorや窓の杜などからダウンロードして利用して下さい（「FileZilla」はvectorからで）。
尚、FTPで利用する「ID & Pass」はXserverであれば契約時にメールが来ていると思いますが、解らなくなった方はServerの管理画面へログインして確認して下さい。
具体的に子テーマを利用してみよう！
それでは具体的な利用方法を説明します。概念さえ一度理解してしまえば後は簡単なので頑張りましょう。
子テーマは親テーマを上書きして反映する
子テーマは親テーマを上書きして反映します。具体的には「style.css」や「itiran-thumbnail-on.php」といった「php」ファイルです。但し「functions.php」は例外で親テーマの書き方で、子テーマが反映出来るかが決まりますので注意が必要です。
phpファイルを子テーマへ導入する場合（例：サムネイル画像の参照先を変更）
例えば以前の記事でサムネイル画像が不揃いの場合の対処方法（STINGER6トップページのサムネイル画像が不揃いの問題を解決しよう！ ）を記事にしていますが、この場合は対象の3ファイルを親テーマから子テーマへコピーします。
- itiran-thumbnail-on.php
- newpost-thumbnail-on.php
- kanren-thumbnai-on.php
注意点は修正したい該当箇所のみを記載するのではなく、一旦、全ての内容を親テーマより子テーマへコピーする事です。具体的には「FileZilla」などを利用して、該当の3ファイルを親テーマより皆さんのPC内にダウンロードし、その後、子テーマの該当ディレクトリーにアップロードします。
- 親テーマのphpファイルのダウンロード元
→ /ドメイン/public_html/wp-content/themes/stinger6 - 子テーマのphpファイルのアップロード先
→ /ドメイン/public_html/wp-content/themes/stinger6child
親テーマにも子テーマにも3つの同じファイルが存在しますが、phpファイルは子テーマが優先されますので、親テーマの内容を無視し子テーマの内容が反映される事になります。
サムネイル画像の問題を解決したい場合は、該当箇所を以下の様に修正します。（「itiran-thumbnail-on.php」であれば6行目）
- 修正前
|
1 |
<?php the_post_thumbnail( 'st_thumb150' );?> |
- 修正後
|
1 |
<?php the_post_thumbnail( 'thumbnail' ); ?> |
修正時にはアップロード前にphpファイルをテキストエディターを利用して修正する方が簡単です。
ちなみにモカはsakuraエディタを利用していましたが、windows10では動かなくなってしまったので「Mery」というエディタを利用しています。使い勝手は特段問題ありません。
あ、修正前には必ずバックアップを取得して下さいね。ちなみに子テーマを修正しておかしくなってしまった場合は、該当ファイルを削除してしまうのも手ですし、親テーマから同ファイルを再度アップロードするのも手です。FTPが利用出来る様になって慣れてくると対処方法も増えますので、子テーマ導入時に色々と勉強しておく事をオススメします。
モカの場合、真っ白になってしまう事もたまにありますが数分で復旧出来ます（真っ白になる事自体が問題ですが…。）
cssファイルをカスタマイズする場合（例：サイドバーの見出しフォント変更）
子テーマの「style.css」に追記して行くと親テーマの内容を上書きます。必要な個所のみ記載しますので、例えばサイドバーの見出しのフォントサイズを変更する場合は以下の様に子テーマへ追記します。
|
1 2 3 4 5 6 7 8 |
/* サイドバーの見出し */ #side aside h4 { font-size: 16px; font-weight: bold; padding: 10px; margin-bottom: 20px; line-height: 28px; } |
こちらの「frot-sizu:」の16pxを上げ下げする事でフォントサイズを変更する事が出来ます。他の個所を変更する必要がなければフォントサイズのみ記載すればOKです。これを応用すれば当サイトの様にサイドバーの関連記事の表示を変更したりする事が出来ますよ！
※フォントサイズが反映されない場合がありますが、キャッシュ等の設定が影響する場合があります。解決方法はGoogle先生に聞いてみて下さい（ぉぃ。
fanction.phpを修正する場合（例：抜粋文字数の変更）
基本的には子テーマの「fanction.php」ファイルへ追記します。但し、以下の記述がある場合のみとし、記述が無い場合は親テーマを直接修正しなければなりません。
|
1 |
if ( !function_exists( 'st_after_setup_theme' ) ) { |
こちらの記述がある個所については、子テーマに記述がある場合は親テーマを無視し子テーマ側を優先します。他の記述方法の場合は子テーマに記載してしまうと、fanction.phpは同様の記述は1回のみのルールに引掛りエラーになります（真っ白、エラーコード吐出し）。
例えば抜粋文字数を変更する場合は以下の様に子テーマのfanction.phpに記述します。
|
1 2 3 4 5 6 7 8 9 10 |
if (!function_exists('st_custom_excerpt_length')) { /** * 抜粋の長さを変更する */ function st_custom_excerpt_length($length) { return 60; } add_filter( 'excerpt_length', 'st_custom_excerpt_length', 999 ); } |
親テーマのfanction.phpを見て貰えると解ると思いますが、デフォルトは「return 50;」を記述がありますので、これを「60」へ変更した事になります。
まとめ
現在、こちらの記事は「3,500文字」を突破してしまいました…。これ以上長くなってしまうと読むに堪え難い記事となってしまいそうなので、一旦、この辺り迄にしますね～。ちなみにモカはWordPressを始めて3ヶ月でこの程度までを理解出来ましたので、カスタマイズをする方なら同様に理解する事が出来ると思います！
これだけは注意して貰いたいのですが、カスタマイズしても記事を書かないとアクセスは増えませんので、カスタマイズはほどほどにね～(笑)。