wordpressでサイトを制作する場合、大きく分けると2つの方法があります。
１つは真っ白い状態からオリジナルでテーマを作っていく場合（travel sketch）、もう１つは既存のテーマを自身でカスタマイズしていく方法です。
今回は既存のテーマを自身でカスタマイズしていく方法の中で「子テーマ」を作る方法で進めていきます。
wordpressの子テーマ
wordpressの既存のテーマを使って制作する場合、既にcssも含めて出来上がっている状態ですが「一部のスタイルを書き換えたい」という様な場合に既存のテーマ自身を弄ってしまうと、そのテーマがアップデートした場合に書き換えた内容が上書きされてしまう可能性があるので「子テーマ」を作ります。
「子テーマ」とは、選択した既存のWordPressテーマである「親テーマ」の機能やスタイルを継承した上で編集していくためのテーマです。既存テーマのカスタマイズ専用テーマということです。
子テーマの作り方
「子テーマ」を作るために必要なファイルは「style.css」と「functions.php」の2つのファイルのみです。これら2つのファイルに必要な記述をして「親テーマの名前-child」という名前のフォルダーに入れて、「親テーマ」と同じ階層にアップロードするだけです。
style.cssに必要な記述
/* Theme Name:twentyseventeen-child Description:WordPress2017年公式テーマの自作子テーマです。 Template:twentyseventeen Author:自身の名前 */
functions.phpに必要な記述
<?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')
);
}
?>
add_action:WordPressに機能を追加する宣言です。ここでは子テーマのCSSとJavascriptを読み込んでいます。
4行目のwp_enqueue_style:親テーマのCSSを読み込みます。
5行目のwp_enqueue_style:親テーマのCSSを上書きします。
ここでは、4行目のstyle.cssの後に子テーマが読み込むよう設定するのがポイントです。こうすることで、親テーマのスタイルの後から、追加した子テーマのスタイルを読み込みます。
最後に子テーマ用のサムネイル画像を作成しましょう。
サイズ：600x450px
ファイル名：screenshot.jpg
サイト100選に固定ページを追加する
以前作ったサイト100選にオリジナルのトップページと自己紹介ページを追加します。
ページ構成
- トップページのコンテンツ：キービジュアル、自己紹介ページの概要、サイト100選ブログの概要、新着ニュース、サイト100選の最新記事（よく見られている記事）
- 自己紹介ページ：キービジュアル、詳細な自己紹介、SNSのプラグイン、お問い合わせフォーム
- ブログページ：サイト100選
トップページの作成
まずはトップページを作成しましょう。この時ファイル名は必ず「front-page.php」にしましょう。
ヘッダー部分とフッター部分は既存のテーマにあるものを使うので、中のmain部分のみ作っていきます。
またスタイルシートも「style.css」は親テーマで使われているので、違うファイル名にします。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="utf-8"> <title>2017公式テーマの子テーマ（仮）｜トップ</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/child-style.css"> </head> <body> <div class="child-main"> <div class="about"> <div class="txt-box"> <h2>About</h2> <p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p> <p class="link"><a href="#">aboutページへ</a></p> </div> <p><img src="https://placehold.jp/83838a/ffffff/800x500.jpg" alt=""></p> </div><!--/.about--> <div class="site100"> <div class="txt-box"> <h2>web site 100</h2> <p class="txt">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、</p> <p class="link"><a href="#">サイト100選ページへ</a></p> </div><!--/.txt-box--> <p><img src="https://placehold.jp/83838a/ffffff/800x500.jpg" alt=""></p> </div><!--/.site100--> <div class="news"> <h2 class="news-tit">News Release</h2> <dl> <a href="#"> <dt>2019.07.27</dt> <dd class="blog-txt">ブログ記事タイトル</dd> </a> <a href="#"> <dt>2019.07.27</dt> <dd class="blog-txt">ブログ記事タイトル</dd> </a> <a href="#"> <dt>2019.07.27</dt> <dd class="blog-txt">ブログ記事タイトル</dd> </a> <a href="#"> <dt>2019.07.27</dt> <dd class="blog-txt">ブログ記事タイトル</dd> </a> </dl> </div> <div class="blog"> <h2>site100-新着記事</h2> <ul class="site_post"> <a href=""> <li class="site_post_list"> <p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p> <h3>ブログ記事タイトル</h3> </li> </a> <a href=""> <li class="site_post_list"> <p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p> <h3>ブログ記事タイトル</h3> </li> </a> <a href=""> <li class="site_post_list"> <p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p> <h3>ブログ記事タイトル</h3> </li> </a> <a href=""> <li class="site_post_list"> <p class="site_post_thumbnail"><img src="https://placehold.jp/e8a348/ffffff/240x180.jpg" alt=""></p> <h3>ブログ記事タイトル</h3> </li> </a> </ul> <p class="more"><a href="#">他の記事を見る</a></p> </div> </div> </body> </html>
コメント