InstantWP で Web サイトを子テーマだけでカスタマイズするには？

きょうは、「子テーマ」について学びます。

子テーマとは、Webサイト全体のテンプレートのことでデザインなどがセットになっています。

WordPress では、プログラムのソースコードが一般公開されています。オープンソースのおかげで最新機能を使えます。このソースのことを「テーマ」「プラグイン」と呼んでいるのです。

でも、いろいろ変えたりすると親テーマは大変じゃないですか。そこで親は変えずそのままにしておいて「子」の方だけ変えれば何かと便利ですよね。

きょうはあなたと、その子テーマについて学習します。

１．InstantWP で WordPress テーマのカスタマイズ

こんなに暑いのに「コロナは風邪だから」と意に介さない人がいたりします。「寒くなったらもっとひどいことになる」という人もいます。今のところ「わからない」が正確な情報です。

まず、InstantWP でウェブサイトを子テーマでカスタマイズする場合やねんけど、まずやることは、親テーマを選ぶことやねん。親テーマは、基本的なデザインや機能を持っているから、それをベースに子テーマで独自の変更を加えられるねん。

１．子テーマを作るには

まず親テーマのディレクトリ内に新しいフォルダを作って、そこに新しいスタイルシートやテンプレートファイルを追加する必要があるねん。そうやって子テーマを作ったら、親テーマのファイルを参照しながら、必要な変更を加えていくとええで。

例えば、スタイルシートを変更したい場合は、子テーマのスタイルシートファイルに新しいスタイルを追加したり、親テーマのスタイルを上書きしたりすることができるねん。これで、ウェブサイトを自分好みにカスタマイズできるで！

まず、InstantWPでサイトを作ったら、メインのテーマをいじるんやなくて、子テーマを使うね。メインのテーマはアップデートされたりすると、変更が消えちゃうから、子テーマを使うのがええわ。子テーマを作って、そこにカスタマイズしたいファイルを入れるやん。たとえば、CSSファイルを編集したり、新しいテンプレートファイルを作ったりして、それを子テーマに入れる。そうすると、メインのテーマがアップデートされても、カスタマイズが消えへんで。

２．ブログを始めるのに「 WordPress がいい！」

理由1: 使いやすい

WordPressは初心者でも簡単に使えるんや。管理画面も直感的やし、投稿の仕方も分かりやすい。初めての人でも迷わずにブログ始められるで。

理由2: カスタマイズが豊富

テーマやプラグインがたくさんあって、自分好みにカスタマイズできるんや。おしゃれなデザインから機能豊富なものまで、色々選べるで。自由にブログを作りたい人にはぴったりや。

理由3: SEO対策がしやすい

WordPressにはSEO対策のためのプラグインがいっぱいあるんや。例えば、Yoast SEOとか使うと、簡単にSEO対策ができるんや。検索エンジンで上位に表示されやすくなるで。

理由4: サポートが充実

WordPressは世界中で使われてるから、困った時にネットで調べたら、すぐに解決策が見つかるんや。日本語のフォーラムも充実してるから、安心して使えるで。

理由5: 無料でも使える

最初は無料プランでも十分やし、慣れてきたら有料プランに切り替えて、さらに機能を追加することもできるんや。自分のペースで進められるから、無理なくブログを続けられるで。

WordPressは使いやすさ、カスタマイズ性、SEO対策、サポートの充実度、そして無料で始められる点で、ブログを始めるのに最適なプラットフォームや。迷わずに始めてみてや！

とはわかってはいても、「続かないかもしれないのに1年も契約できない！」とか思っちゃいますよね？

そんなあなたに、「無料で WordPress が使える方法」を解説します。

テーマは、そのまま使用しても見栄えのいいサイトになりますが、すこしだけオリジナリティを出したいってことありませんか？「デザインを変更したい」など自分好みにカスタマイズを加えたいと思いますよね。

ただし、テーマのファイルを変更しょうと思うと、HTML と CSS の知識が必要になってきます。

なので、テンプレートのタグや PHP のコードは、カスタマイズしながら覚えていきます。親テーマというのは「元のデザイン」ということです。子テーマはその一部分を変更できるのです。テーマを選ぶ。

３．InstantWP で子テーマをつくる

テーマファイルを直接編集すると、アップデートする時ファイルが上書きされてカスタマイズした部分が消えてしまいます。親テーマを直接カスタマイズすると、親テーマがバージョンアップした時にその内容が消えてしまうので、変更したい部分だけを上書きできる方法が「子テーマ」です。

テーマをアップデートしないという選択肢もありますが、サイトの運用においてアップデートを無視するということは好ましくない状態であるわけです。すると同名ファイルのカスタマイズが存在した場合、そのカスタマイズ内容はファイルに上書きをされます。「テーマはカスタマイズしたい」「でもアップデートもしたい」という２つの目的を果たすために子テーマがあります。

つまり、子テーマを使うメリットというのは、親テーマをアップデートさせても自分の変更内容を保持できるという点にあります。

４．InstanWP で子テーマを準備

５．ここでは「Cocoon」を親テーマとすると、その下に子テーマを作る

InstantWP ではこれが簡単にできるのです。親テーマは今後何かのきっかけで変更してしまうと都合が悪いのですね。なので子テーマです。

InstantWP のコントロールパネルから<Themes Folder>をクリックします。時として「このサイトは表示できません。12.0～」という表示がでることもありますが、しばらくしてから再度クリックしてください。この InstantWP はまだ発展途上のプログラムなのでときどき不具合が起こるのです。

1. 左上の4番目をクリックすると<新しいフォルダ>と表示され、右側に現れますので「Twenty Sixteen-Child」と入力します。

子テーマを作るとなると、ファイルが２つ必要

1. １つは、スタイルシートを記述する「style.css」
2. もう１つは、関数などを記述する「function.php」

「style.css」を作成する

さっき作成した子テーマフォルダ<twentyseventeen-child>をダブルクリックして開きます。

「空のフォルダ～」の白い画面を右クリックして、<新規テキストファイル>をクリックすると、テキストファイルが作成されるので「style.css」というファイル名に変えます。

同じように「function.php」というファイルも作成します。<style.css>を右クリックして、<ファイル編集>→<ACE Editor>をクリックします。

そして、テキストエディターが開いたら、以下のコードを入力します。Template の行は、親テーマのディレクトリ名を入力します。ここでは「Twenty Sixteen」のディレクトリィにしています。入力したら<保存して閉じる>をクリックします。

６．InstantWP のコード　style.css

あー、InstantWPのstyle.cssのコードやなぁ。ほな、ここら辺で教えてみよか。style.cssは、ウェブサイトの見た目やレイアウトを制御するんやで。例えば、フォントの大きさや色、背景の色や画像、レイアウトの調整なんかができるねん。詳しいことは、何か具体的な部分を聞いてくれたら答えられるかもしれへんで。

ACE Editor 保存して閉じる

７．InstantWP のテンプレートファイル

InstantWPのテンプレートファイルやな。それは、ウェブサイトの構造やコンテンツを決めるファイルやで。例えば、ヘッダーやフッター、サイドバー、ページのレイアウトやデザインなんかを指定するんや。テンプレートファイルには、HTMLやCSS、PHPのコードが入ってるねん。HTMLでコンテンツの構造を書いたり、CSSでスタイルを指定したり、PHPで動的な部分を処理したりするんや。ウェブサイトの見た目や機能は、このテンプレートファイルをいじってカスタマイズできるで。

テーマのファイル構成

1. Web ページを生成するテンプレートファイル群
2. パーツ用テンプレートファイル
3. テーマのための関数ファイル
4. Web ページの外観を制御するスタイルシート
5. JavaScript や画像ファイル

デベロッパーツールとは Google Chrome のToursのことです。Windows の場合は<F12>、Mac の場合は<command>＋<option>+<I>キーを押すと開けます。Google Chrome で Web サイトを開き、画面上で右クリックして、<検証>をクリックするとデベロッパーツールが表示されます。

変更したい場所の要素とスタイルを調べるには、左上の「↖」をクリックします。「ページ上の検索対象となる要素の検証は」と出てきます。ここではサイドバー部分をクリックしてみます。

デベロッパーツールに、クリックした部分の HTML が表示され、要素を確認できます。

８．InstantWP で CSS を変更してプレビュー

デベロッパーツール内で、スタイルを変えたりプロパティの値を変更したりスタイルを追加するとリアルタイムでプレビューを確認できます。ここでは、フォントサイズの値を20pxに変更し、テキスト右寄せにしてみます。

デベロッパーツールでの変更は、実際のファイルには影響しません。変更したスタイルを保存した場合は該当の CSS をコピーし、子テーマフォルダー内の style.css に貼り付けて保存します。

2．InstantWP で WordPress のデザインをカスタマイズ

１．InstantWP でページタイトルのスタイルを変更

テキストエディターで子テーマの style.css にコードを追記し、保存します。

• ウィジェットタイトルのスタイルを変える
• <更新>右隣の歯車<設定>をクリックし、<ブロック>にします。
• デフォルトでは文字サイズが16px と小さいので、少し大きめの18px に変えます。
• 子テーマの style.css に以下のコードを追記し、保存します。

３．InstantWP で WordPress トップページをカスタマイズ

１．InstantWP のコントロールパネルから

<Thems Folder>をクリックして Web File Manager を表示し、テーマフォルダーを開いたら、<tentysixteen>をダブルクリックします。<font-page.php>を右クリックして、<コピー>をクリックします。

新聞には文章がたくさん載っていますが、段組みされているので読みやすいですよね。

例えば、サイドバーにカレンダー、メディア、ナビゲーション、検索、地図等を好きな順番で表示したいなど。それがレイアウトのウィジェットです。

スマホで、ウィジェットを設置、変更したい場合は、画面上で長押しします。メニューが出てくるので、一覧の中から設置したいウィジェットを選び、置きたい場所に動かせばOKです。でも、パソコンの場合はこうはいきませんね。では、どうすればいいでしょうか。

Web ページも分割した列にすることで読みやすくなります。ウィジェットとは、投稿の枠外に位置するコンテンツで特定の機能を表示させることができます。アーカイブを表示させたい、天気や時計、ニュース、バッテリー残量などもあります。

２．InstantWP でナビゲーションメニューを作成

管理画面から<外観>→<メニュー>をクリック。メニューとは Contact とか Access のメニューのことです。ここから追加したり削除したりできます。ユーザーが注視するサイドバーには最新の投稿や行動をうながすウィジェットを、そして、フッターにはソーシャルメディアフィードを配置するのがいいかもしれません。

４．InstantWP で WordPress フロントページと投稿ページ

１．特定の固定ページの内容をトップページとして表示

投稿一覧は別の固定ページに表示させます。

管理画面から<固定ページ>→<固定ページ一覧>→<Concept>をクリックし、Concept ページの編集画面を開きます。投稿エディタに店内の写真とお店の紹介文を入力して<更新>をクリックします。設計図ができればあとは文章を書くのが速くなるでしょう。

• 文章を読む人を明確にする。これは現在このブログを幾つぐらいの方が見てくれているのか見つけなければなりません。Analytics で調べてみます。
• 文章の目的を明確にします。このブログのテーマは「ウィジェット」ですから、単にそれだけではなく「自分もウィジェットを使ってみたい！」と思わせる文章を書かなければなりません。
• 読む人のニーズを把握する。「これがウィジェットです」だけでは自分の都合を一方的に伝えただけの文章です。それを使用してどうなったのか？何を得たのかを記さなければなりません。

• 読む人の反応を決める。読む人の反応は書く人が決めなければならないのです。
• 文章を書くために必要な情報を収集する。最も有効な情報は書き手自身の体験です。主観的な情報に客観的な情報が加わると情報の有益性が一段とアップします。
• 文章の流れ（構成）を決める。「結論優先型」「順型」「比較型」「提案型」「主張型」「列記型」「ストーリー型」「紹介型」

これをやることで書く時間が短縮され，的確でブレのない文章を書くことができます。

５．WordPress サイドバーにウィジェットを設定

１．ウィジェット

ナビゲーションメニューなどをサイドバーに表示させるものです。管理画面から<外観>→<ウィジェット>をクリックします。左側が「利用できるウィジェット」です。右側が「サイドバー」です。不要なウィジェットはドラッグして左側の枠外へほうりだします。ドラッグすれば上下の並びも変えられます。

「検索」ウィジェット

シンプルで便利なウィジェットが、WordPress に標準でついています。

最近の投稿

おそらくブログで最も広く使用されているウィジェットです。サイトのすべてのページのサイドバーやフッターに最新の投稿を一覧表示でき、訪問者に対して多くの投稿を提示することができます。このウィジェットは表示する投稿の数と見出しを設定できます。

メディアを追加

サイトに彩りを添えてユーザーに見たり操作したりすることのできる楽しさを提供できます。ビルトインの「画像」ウィジェットを使用して任意の画像や、その画像にリンクを設定することもできます。

👄YouTube

「動画」ウィジェットを使用するとビデオを埋め込むことができます。これは、サイトにトップページ専用の特別なウィジェットエリアがある場合に特に便利ですが、投稿の最後に注意を引く方法としてフッターに設定することもできます。

🙋ソーシャルメディアフィード

SNSで交流したい場合は、サイドバーまたはフッターに追加します。SNSでアピールし、フォローをうながすことができます。Facebook、Twitter、Instagram のソーシャルメディアウィジェットを利用する方法として、例えば、Jetpack プラグインがあります。

💅買いものカゴ

eコマースストアを運営している場合には、買い物かごウィジェットを利用できます。ユーザーは簡単に商品を買い物かごに追加できます。サイドバー、さらに可視性の高いヘッダーに配置できます。

WooCommerce のような e コマースプラグインには、買い物かごウィジェットやその他の eコマースウィジェットが含まれているため、追加すると、「ウィジェット」画面に表示されます。

🚫地図ウィジェット

店舗経営の方には、アクセスを考えて追加することをお勧めします。WP Google Maps など、Googleマップウィジェットプラグインが多数あります。プラグインをインストールしたくない場合、 Google マップから埋め込みコードを取得して、HTML ウィジェットに追加できます。

ただし追加しすぎないようにします。ウィジェットを詰めこむほど、ユーザーに見てもらえなくなります。サイドバーに追加するものは、メインなウィジェット３つに絞りこみます。重要度が低いものはフッターに追加できます。

2．フッターにウィジェットを追加

フッターは Web ページの一番下の部分です。

ここにはサイト運営の情報やリンクなどを記述するのが一般的です。このフッター部分にウィジェットそ表示できるエリアが２つあります。

• 管理画面から<外観>→<ウィジェット>をクリック、左上の「利用できるウィジェット」から<テキスト>をクリック、最初は「サイドバー」にチェックが入っていると思いますが、<フッター1>を選んだ状態で、<ウィジェット追加>をクリックします。テキストをウィジェットにドラッグでもできます。
• ウィジェットをフッターに追加したら<ビジュアル>をクリックし、店舗名・住所・℡や営業時間などを入力します。<保存>をクリックします。「自動的に段落を追加する」にチェックを入れると、綺麗に上下並びます。「表示設定」で非表示にしたいページを選べます。

できました。なるほど、フッターには一般的に「店舗情報」が入ってますね。背景色は後から「Cocoon設定」→「フッター」で好みの色に替えます。文字色も変更できます。ロゴも挿入できます。

ウィジェットは、ウェブサイトに新風を吹きこむ

訪問者を顧客に変えることに貢献します。プラグインディレクトリには、無料のウィジェットプラグインが何千とあります。それに加えて、他の多くのプラグインにもウィジェットが組み込まれています（買い物かごウィジェットなど）。

私たちはブログを書く時間を延ばしたり、クタクタになるまで思案しなくても、やり方によっては能率を3倍にも4倍にも上げることができるものです。これらのウィジットを利用することで、ちょっと見にはいかにも能率をあげてブログを書き進めているようにみえます。

しかし実はまだまだ改良の余地があるかもしれません

(1)毎日の書き込みの手順を検討

• 準備：必要な道具、ウィジットが揃っているか？
• 実行：その書き込みを完了するために、どんなことをやったか？
• 後片付け：使った道具を片付けたか？

(2)以下のことを改めて考えてみる

• 一体それはなぜ必要なのか？
• 何がその書き込みの重点なのか？
• いつ書き込みをすればよいか？

(3)新しい方法を見つけ出す

• 不必要な細部を排除する
• 2つ以上のページを関連させる
• 書き込みの手順を系統的に再編成する

必要なプラグインが見つからない場合には、有料のプラグインも利用できますが、無料のプラグインでも同じ機能が見つかる場合があるため、プラグインを購入する前にプラグインディレクトリをよく調べてみてください。

あとがき

「子テーマ」。これまで食べたこともない料理を味わうときのような妙な感覚です。子テーマを使ったカスタマイズは、上書きされないので安心安全に使うことができます。

どうせなら「明るい言葉」を使います。明るい言葉は人の鼓膜を明るく震わせるからです。明るい言葉には明るい振動があります。その内容が読み手に理解されてもされなくても、鼓膜が物理的に明るく震えることにはかわりはありません。

フレッシュな気持ちで物事を始めれば、普通よりも上手に早くできます。Cocoon の技術を使えば、1日に1度どころか、2度も3度も気分を転換することができます。毎日数回にわたって清新な溌溂とした気持ちになるには、わずか5分～10分ぐらいの時間を要するだけです。

文章は家づくりと似ています。どんな家を建てようか？と考えることは「ウィジェット」をどのように配置するか？と同じではないでしょうか？あらかじて設計図を用意した方がいいですね。設計図ができればあとは文章を書くだけです。

子テーマだけでカスタマイズすることについて、悩みや疑問がありましたらご自由にコメント欄に投稿してください。（コメント欄はこの記事の最下部です）。いただいたコメントはすべて拝見し、真剣に回答させていただきます。