【ワードプレスのテンプレートファイルをカスタマイズする】

ワードプレスのテンプレートファイルをカスタマイズする。前回の投稿では「CSS」のカスタマイズでしたが今回は、ワードプレスのテンプレートファイルをカスタマイズするについて書いていきます。

「子テーマ」として作成しているビジネスサイトのヘッダーをカスタマイズするやり方です。方法としては「子テーマ」の「CSS」ファイルにセレクタで指定したスタイルを、ヘッダー部分に記述すると言うものです。

【CSSの記述ルールについて(動画付き)】

「CSS」で、レイアウトなどのデザイン要素を指定する場合のことを「プロパティ」と呼び、その値を設定する間に「:」で区切り、その後に記述します。いくつもの値を設定する際は、スペースを入れます。

また1つの「プロパティ」と値の対のことを「宣言」と呼び、1つの宣言の指定が終了するごとに「;」を記述します。通常は、その後で改行して見やすくします。一例では、3つの宣言をおこなっています。

宣言は「{」と「}」で挟んで後からまとめて記述します。この部分のことを「宣言ブロック」と呼びます。その宣言ブロックの前に記述される「p.kiratext」がセレクタです。セレクタは、宣言部の設定を適用する対象を指定する部分です。

ではここで動画を視聴してみて下さい。題して「CSSの記述ルールとCSSを用いて修飾する仕組み」です。

一応記載しておきますが、ワードプレスブログをバックアップする際、注意したいのは、ワードプレスで作成したブログと言うのは「テーマ」や「プラグイン」など、コンテンツが別のデータだと言うことを覚えておきましょう。

以前紹介した「FTPソフト」を使って、レンタルサーバーに展開しているワードプレスサイトをまるごとダウンロードします。全部をダウンロードしなくても、必要なモノだけをバックアップすることも可能です。

【Webサイトをカスタマイズしよう(動画付き)】

実際にスタイルシート(CSS)を編集し、それがページ上でどのように変化するのかを確認してみましょう。この章では、当ブログ(miブログ)で実際に使用しているワードプレステーマの「DIVER」を使っていきます。

ヘッダーに表示される「サイトタイトル」として表示する語句は、ワードプレスのデフォルトであるカスタマイズ機能を使って指定します。具体的には、ダッシュボードのサイドメニューで「外観→カスタマイズ」を開きます。

すると「カスタマイザー」画面が開きます。更に言えば、同じ「カスタマイザー」を使って、キャッチフレーズを指定すると「サイトタイトル」の下に短いフレーズを設定することも可能となります。

ではここで動画を視聴してみて下さい。題して「【最初に見て！】ブログ名の後悔しない決め方(付け方)を教えます。」です。

header.phpを確認してみよう

ここで「header.php」がどのようにして「HTML」を作成しているのかを知る必要があります。「header.php」がどの要素タグを使って「サイトタイトル」を表示いているのかを知らなければスタイルシート(CSS)にセレクタを設定しようがありません。

「header.php」は「子テーマ」のディレクトリーには、複製されていないとしましょう。この章では「子テーマ」は、できるだけシンプルにしておき「親テーマ」から、利用できるファイルは「子テーマ」には複製しないとします。

ですが実際には「header.php」を「子テーマ」に複製し、その「header.php」に編集を加えることもあります。どうしてかと言うと、その方がより本格的なカスタマイズが可能になるからです。

ヘッダーのテンプレートファイルをカスタマイズする

ワードプレスでは、1つのWebページを構成するのにいくつものパーツを組み合わせます。ヘッダー部分のパーツテンプレートは「header.php」です。このファイルを「親テーマ」から「子テーマ」のディレクトリに複製します。

今回は、ここまでといたします。「ワードプレスのテンプレートファイルをカスタマイズする」については、理解できましたか？前回投稿した「ワードプレスの子テーマでCSSをカスタマイズしよう！」も参考にしてみて下さい。

トップページへ戻る