未経験のwebサイト制作の勉強

未経験からwebサイト制作の勉強をし、現在制作会社で働いております。

wordpressの公式テーマに子テーマを作ってカスタマイズする

wordpress

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')
);
}
?>

dd_action:WordPressに機能を追加する宣言です。ここでは子テーマのCSSとJavascriptを読み込んでいます。
4行目のwp_enqueue_style:親テーマのCSSを読み込みます。
5行目のwp_enqueue_style:親テーマのCSSを上書きします。
ここでは、4行目の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>