こちらでは、インストールしたWordpressを自分なりにカスタマイズしていく記事になります。
四部構成の3個目になります！
テーマカスタマイズ⇨今回ここです！
それでは、引き続き張り切っていきましょう！！
決定テーマの導入
テーマファイルをインポート
ZIP形式のファイルだと思いますので、そちらをWordpressにインポートしてください。
前回の記事で決めたテーマ(無料 or 有料)をWordpressにインポートします。
無料の場合は、検索で探すことができるかもしれませんが、有料の場合はZIPファイルを有料で購入したサイトからダウンロードする形になります。
今回は、有料テーマをZIPファイルでダウンロードした場合、Wordpressにインストールする方法を説明します。
外観⇨テーマの「新規追加」をクリックします。
「テーマのアップロード」をクリックします。
「ファイルを選択」というボタンが出るので、各自ダウンロードしたテーマのZIPファイルを選択し、「今すぐインストール」をクリックしてインポートしてください。
子テーマを作っておく⇨インポート
今大元のテーマをインポートしたかと思いますが、これに付随する子テーマも入れておきましょう。
なぜこのようなことをするの？
についてですが、
テーマアップデート対応のため
です。
本来、テーマは更新やアップデートが伴うのですが、直接そのテーマに設定変更を加えていると、アップデートのタイミングで設定がリセットされる可能性があります。
そのため、子テーマを適用させることでアップデートが発生しても設定に影響のないようにするのです。
親テーマをまずインポートしたら、それに伴い子テーマもインポートしましょう。
子テーマはGoogle検索等で「(テーマ名) 子テーマ」でダウンロードできるかと思います。
今回は、「STORK 子テーマ」で調べてみました。
下記のように検索すればダウンロードできるのがわかるかと思います。
親テーマと同じようにWordpressにインポートしておいてください。
下記青枠が親テーマ、赤枠が子テーマです。
有効化については、「子テーマ」を有効化してください。
テーマ適用は終了です。
外観調整
ここからは、実際の外観の調整について説明していきます。
外観の設定は、テーマごとに設定が微妙に異なるのですが、基本的な知識を抑えたら後は調べながらセッティングできると思います。
下記にて必要な知識を抑えていきましょう。
必要知識
トップページ
サイトの基本画面構造は、下記の通りとなります。
STORKのインポート後の初期画面となります。
- ヘッダー
- メインコンテンツ(記事部とサイドバー部)
- フッター
ヘッダー⇨サイトの一番頭にくる部分(帯)です。主にサイトタイトルや各ページへ飛ぶリンク等が設置できます。
メインコンテンツ(記事部)⇨これから投稿してく記事カードがあります。記事が増えるたびにこのカードが増えていきます。
メインコンテンツ(サイドバー部)⇨プロフィール紹介や検索窓やカテゴリー毎の記事一覧がみれたりします。別名「ウィジェット」と呼びます。
フッター⇨サイトの一番下にくる部分(帯)です。主にプライバシーポリシーや運営情報等であるサイト管理情報へのリンクが付与されていることが多いです。
記事ページ
記事のリンクをクリックすると詳細な記事内容のページに遷移します。
ここでみて思うと思います。
ヘッダーやフッター、サイドバーの表示が変わらないことです。
そうです。サイトは、動的に変化させるところは変化させ、どのページでも変更させない場所を作ることも可能です。
変化しない箇所は、コンポーネントとして扱っている箇所です。
サイトの基本の表示について理解できましたでしょうか？
メニュー
よくヘッダーに下記画像のようなリンクを見たことはないでしょうか？
こちらのことを「メニュー」と呼びます。
別名「ナビゲーションリンク」とも呼ばれます。
画面カスタマイズ
ここからは本格的に初期画面を自分の思い通りにカスタマイズしていきましょう！！！
テーマ⇨カスタマイズをクリックすると、サイトのカスタマイズ画面に移動します。
下記の通り、実際の画面と右の方に設定項目が表示されるような画面になります。
こちらの画面で各項目の設定を変更することで、見た目をアレンジすることができます。
ひとつネックなのが、ここの設定項目
テーマ毎で微妙に異なります・・・
左の項目をいじることでリアルタイムで画面が変化します。
それで、少しずつ慣れていくのが一番理解できると思います。
本記事で全てのテーマで使えるかと言われると使えないと思いますが、なるべく共通化した言葉で説明していきます。
サイト基本情報
サイトのタイトルやロゴ、ヘッダーやフッターの表示設定部になっています。
設定を変えることで画面表示が変化すると思いますので、それを見ながらお好みに調整してみてください。
色設定(デザイン設定)
サイトの色を変化します。
女性らしさを出すなら、ピンク系もいいかも。
背景画像
サイト背景を画像にすることができます。
ただ、こちらについては、画面表示が遅くなる可能性があるため、あまりお勧めしません。
ホームページ設定
ホームページ設定として、二つの設定があります。
- さっきのように投稿記事はカードで表示し、記事一覧として表示するパターン
- 固定ページをホームページのトップページに表示させて訪れた人に固定ページを見せるパターン
１のパターン
２のパターン
先ほどとは異なり、トップページが固定ページになっています。
結局どっちがいいの？
という点については、メリットデメリットあり、正解はないです。
- 記事一覧を見せて、どんな記事があるかをすぐお知らせしたい
- まずは読んで欲しいページがあるからそれを見せたい
ウィジェットカスタマイズ
先ほど説明した、サイドバー等に設置してあるウィジェットの編集方法について説明します。
項目の種類や数を変更することができます。
WordPress管理画面の外観→ウィジェットをクリックしてください。
ウィジェットの設定画面が出てきます。
こちらについてもテーマ毎に設定画面の種類等が異なるので、各自のテーマに合わせ、臨機応変に対応してください。
画面構成としては、右側と左側に分かれます。
左側に関しては、現在利用できるウィジェットです。どんなのがあるのかを実際に触ってみて設置してみたいのがあるか探してもらえたらと思います。
右側に関しては、現在ホームページに設置されているウィジェットになります。
とは言っても、よくわからないと思います。
- PC：メインサイドバー
- PC：メインサイドバー(コンテンツ下)
- SP：ハンバーガーメニュー
というように、さまざまな項目があるかと思います。
こちらは、ウィジェットの設置場所や表示するデバイス毎に分かれています。
例えば、メインコンテンツのサイドバーにウィジェットを設置したい！
となると、PC：メインサイドバーを選びます。
スマートフォンで、下記画面のような3本線をみたことがあると思います。
こちらについては、「ハンバーガーメニュー」と呼ばれるもので、この場合はSP：ハンバーガーメニューになります。
ウィジェットの設定画面で三角を押すと、今設定されているウィジェットが見れるようになります。
ここからは実際にどうやって左側のウィジェットを右側の項目にセッティングするか？というところですが。
同じく、左側の項目も三角を押すと設定できる項目が表示されます。
ややこしいと思ったので、下記動画にて実際にやってみました。
サイドバーから最近のコメントを削除し、カレンダーを追加しています。
メニューカスタマイズ
先ほど説明した、ヘッダー等に設置してあるメニューの編集方法について説明します。
項目の種類や数を変更することができます。
WordPress管理画面の外観→メニューで下記画面が表示されます。
先程のウィジェットと同じで、左側が追加できるメニュー、右側が今追加されているメニューになっています。
メニューは、複数作成が可能で、作成されたメニューをホームページ各箇所に設置することができます。
(設置できる箇所は、メニュー設定項目に「メニューの位置」があると思います。そこのグローバルナビかフッターナビに設置できます。)
追加できるのは、先ほどのウィジェットとは違い、項目は少ないです。主にリンク系が追加できる形になっています。
同じく動画で実際に編集してみました。
カスタマイズに終わりなし！
画面のカスタマイズについては、正直終わりがないと思っています。
拘ればこだわるほどいいですが、あまり時間をかけ過ぎるのも良くありません。
UI(ユーザーインターフェース)、つまりユーザーの使いやすさが満たせていたら、まずは記事を書くことに集中しましょう！
ある程度、上位表示されたらもう少し画面を拘っていくのもいいと思います。