ワードプレスのテンプレートファイルをカスタマイズする。前回の投稿では「CSS」のカスタマイズでしたが今回は、ワードプレスのテンプレートファイルをカスタマイズするについて書いていきます。
「子テーマ」として作成しているビジネスサイトのヘッダーをカスタマイズするやり方です。方法としては「子テーマ」の「CSS」ファイルにセレクタで指定したスタイルを、ヘッダー部分に記述すると言うものです。
| 結論を先に話ししておきます |
| テーマのレイアウトやデザインを自分好みにカスタマイズするには、テーマ用のスタイルシート(CSS)をカスタマイズします。拡張子が「.css」のこのファイルのカスタマイズは、ワードプレステーマの編集ページで専用のエディターを使っておこないます。
この章では、ワードプレステーマの「DIVER」を例にした「CSS」の基本的な説明をしていきます。そこでは「class」と「CSS」の関係を説明し、簡単なスタイルシート(CSS)の編集をおこなっていきます。
前回投稿した「CSS」関連の「ワードプレスの子テーマでCSSをカスタマイズしよう！」も見て貰えると幸いです。 |
目次はコチラ
【CSSの記述ルールについて(動画付き)】
「CSS」で、レイアウトなどのデザイン要素を指定する場合のことを「プロパティ」と呼び、その値を設定する間に「:」で区切り、その後に記述します。いくつもの値を設定する際は、スペースを入れます。
また1つの「プロパティ」と値の対のことを「宣言」と呼び、1つの宣言の指定が終了するごとに「;」を記述します。通常は、その後で改行して見やすくします。一例では、3つの宣言をおこなっています。
宣言は「{」と「}」で挟んで後からまとめて記述します。この部分のことを「宣言ブロック」と呼びます。その宣言ブロックの前に記述される「p.kiratext」がセレクタです。セレクタは、宣言部の設定を適用する対象を指定する部分です。
ではここで動画を視聴してみて下さい。題して「CSSの記述ルールとCSSを用いて修飾する仕組み」です。
「CSS」におけるセレクタとは、スタイルを適用する箇所のことを言います。カンマで区切って併記することで、複数のセレクタに同一のスタイルを適用することが可能となる訳です。それはどう言うことかと言うと、下記の図解をご覧下さい。
ではここで、セレクタについての動画を視聴してみて下さい。題して「CSSにおけるセレクタとは何か？セレクタの種類や記述方法をスッキリ解説」です。 |
一応記載しておきますが、ワードプレスブログをバックアップする際、注意したいのは、ワードプレスで作成したブログと言うのは「テーマ」や「プラグイン」など、コンテンツが別のデータだと言うことを覚えておきましょう。
| ワードプレスブログをバックアップするのに必須のプラグインは「BackWPup」がおススメです。また以前投稿した「ワードプレスでおススメのプラグイン15選」の中には「BackWPup」に関する内容のものを動画付きで投稿しております。
「テーマ」や「プラグイン」に関して、再インストールすることは可能ではありますが、設定は最初からやり直ししなければなりません。そこで「テーマ」や「プラグイン」をバックアップする訳です。 |
以前紹介した「FTPソフト」を使って、レンタルサーバーに展開しているワードプレスサイトをまるごとダウンロードします。全部をダウンロードしなくても、必要なモノだけをバックアップすることも可能です。
| FTPソフトに関する投稿 |
| 以前「ワードプレスをカスタマイズする前に子テーマを準備！」と言う動画付きで投稿しています。是非ご覧になって見て下さい。 |
【Webサイトをカスタマイズしよう(動画付き)】
実際にスタイルシート(CSS)を編集し、それがページ上でどのように変化するのかを確認してみましょう。この章では、当ブログ(miブログ)で実際に使用しているワードプレステーマの「DIVER」を使っていきます。
ヘッダーに表示される「サイトタイトル」として表示する語句は、ワードプレスのデフォルトであるカスタマイズ機能を使って指定します。具体的には、ダッシュボードのサイドメニューで「外観→カスタマイズ」を開きます。
すると「カスタマイザー」画面が開きます。更に言えば、同じ「カスタマイザー」を使って、キャッチフレーズを指定すると「サイトタイトル」の下に短いフレーズを設定することも可能となります。
| 「サイトタイトル」やキャッチフレーズにどのような文字列を指定するかはカスタマイザーによって、おこないますが、これらのフォントサイズや表示位置、文字色などを詳細に設定する機能に関しては「DIVER」は持っています。 |
ではここで動画を視聴してみて下さい。題して「【最初に見て！】ブログ名の後悔しない決め方(付け方)を教えます。」です。
header.phpを確認してみよう
ここで「header.php」がどのようにして「HTML」を作成しているのかを知る必要があります。「header.php」がどの要素タグを使って「サイトタイトル」を表示いているのかを知らなければスタイルシート(CSS)にセレクタを設定しようがありません。
「header.php」は「子テーマ」のディレクトリーには、複製されていないとしましょう。この章では「子テーマ」は、できるだけシンプルにしておき「親テーマ」から、利用できるファイルは「子テーマ」には複製しないとします。
ですが実際には「header.php」を「子テーマ」に複製し、その「header.php」に編集を加えることもあります。どうしてかと言うと、その方がより本格的なカスタマイズが可能になるからです。
| DIVERのheader.phpを確認する方法 |
| 下記の図解でのやり方は「DIVER」のワードプレステーマを使っていなくても、今あなたがお使いのワードプレステーマでも同じやり方です。では「header.php」の表示方法を見ていきましょう。
「header.php」を開くと「紫色枠」で囲まれているように「header.php」が表示されました。
もう一度言いますが、上記の図解は、当ブログ(miブログ)で使用しているワードプレステーマの「DIVER」を使用して作成したものです。あなた側の画面とは違って見えるかも知れませんが、やり方は一緒です。 |
ヘッダーのテンプレートファイルをカスタマイズする
ワードプレスでは、1つのWebページを構成するのにいくつものパーツを組み合わせます。ヘッダー部分のパーツテンプレートは「header.php」です。このファイルを「親テーマ」から「子テーマ」のディレクトリに複製します。
| ワードプレスの「メディアライブラリ」内に保存した画像のURLをコピーします。通常であれば「http://」もしくは「https://」に続いて「(ドメイン名)/(Webサイト名)/wp-content/uploads/(年)/(月)/ファイル名」となります。
例えばですが「https://miblogno1.com/wp-content/uploads/2020/11/828492c77c5b0339e5599626a819bbf4.png」は、当ブログ(miブログ)のタイトル名のURLであり、トップページ上部に表示されている訳です。それが下記の画像です。
ワードプレスでは「メディアライブラリ」にアップロードした画像の場所は、データベースにより、管理されています。その為、どのディレクトリーに保存されているのかは画像ファイルを保存した年月によって異なっています。
またファイル名も覚えていないことが多いので、そのような時は、次の操作方法で画像ファイルのURLを表示することが可能となります。更に言えば、長いURLをコピーできるので便利です。それでは見ていきましょう。
やり方はこのような感じです。「URLをクリップボードにコピー」を押すだけの方が簡単かも知れません。いずれにせよ、慣れてくればアッと言う間にコピーができるようになります。是非やってみて下さい。 |
今回は、ここまでといたします。「ワードプレスのテンプレートファイルをカスタマイズする」については、理解できましたか？前回投稿した「ワードプレスの子テーマでCSSをカスタマイズしよう！」も参考にしてみて下さい。
