先日下記のような記事を投稿しました。
記事を書きながら使用されているテーマの多くが「X-T9」であることに気づきました。
「X-T9」については知ってはいる程度だったのでどのようなテーマなのか気になりました。
WordPressの最新の手法を用いてサイトを作れるのがブロックテーマ「X-T9」と書かれています。
ブロックテーマという言葉に興味がわいてきました。
早速「X-T9」でサイト作成してみたくなりました。
今回はその手順の書いていきます。
Lightning有料版デモサイトのライセンス購入は今がチャンス！！
WordPressの公式テーマLightning有料版デモサイトのライセンス購入は今がチャンスです！！ Lightningではインポート専用プラグイン「VK FullSite Installer」を使用することで、Wor […]
X-T9テーマの設定
WordPressはインストールされていることを前提にしています。
「X-T9」は、WordPressの公式ディレクトリで公開されており、管理画面から無料でインストールして利用できます。
➀管理画面 ➡ 外観 ➡ テーマの画面を表示します。テーマを追加をクリックしテーマの検索に「X-T9」と入力すると下記のように表示されます。「インストール」をクリックしてインストールします。
②インストール終わりました。「有効化」をクリックします。
③有効化が終わるとこのような画面になります。
赤枠に書かれているようにテーマ「X-T9」を使うための必須プラグインをインストールします。
④「プラグインのインストールを開始」をクリックするとこのような画面になります。
赤枠のようなチエックを入れインストールを選び適用をクリックします。
⑤すべてのインストールが完了しました。と表示されたらインストールの終わりです。
赤枠の所をクリックしてプラグインを有効化しておきます。
⑥クリックすると下記のような表示になります。プラグインの有効化をしておきましょう。
★ここまで終えたところでサイトはどのような表示になっているのか見てみましょう。
webサイトを作る準備
まずは、サイトのレイアウトを考えます。
今回はケーキ屋さんのサイトを作成するとして考えてみます。
トップページレイアウト
必要なページ(コンテンツ)のリストアップ
常にサイトの決まった場所に表示しておきたいページは「固定ページ」で作成します。
その下の階層のページは「投稿」で作成します。
固定ページの作成
トップページの編集には、グローバルナビゲーションもあります。そこで先に必要な固定ページを作成しておきます。
固定ページの作成でタイトルに日本語を入れるとスラッグの所にそのまま日本語が挿入されます。テーマ「X-T9」では作成保存後にスラッグを変更すると面倒になるので、固定ページ作成の最初にスラッグを英数字表記にすることを忘れないようにしましょう。
グローバルナビゲーションに固定ページが表示されました。
ヘッダーの設定
グローバルナビゲーションの設定
グローバルナビゲーションの設定を行います。
管理画面 ➡ 外観 ➡ エディタ をクリックします。
デザインの画面が表示されますので「パターン」をクリックします。
パターンが表示されたらヘッダーをクリックします。
ヘッダーのパターンが表示されています。こちらをクリックします。
ヘッダーのテンプレートが表示されました赤枠の所をおクリックすると左側のリストビューがひょじされます。
このようにフラつのグループで作られています。
上段がグローバルナビゲーションとして最上部に表示されます、下段がスクロール時のグローバルナビゲーションとなります。
ヘッダーのテンプレートが表示されています。赤枠の「設定を」クリックします。
先ほど作成した固定ページがグローバルナビゲーションに表示されています。
右側のテンプレートパーツをクリックすると下の方にデザインとあり、こちらからデザインを選ぶことができます。
ナビゲーションの編集をしていきます。
上段のナビゲーションをクリックして表示されてたら、赤枠の「編集」をクリックします。
不要なナビゲーションを削除します。
お問い合わせはボタンがあるので、赤枠の所お問い合わせを選びオプションを選び削除をクリックします。
お問い合わせが削除されています。
ナビゲーション項目を移動したい時には、項目をクリックし「〈 」をクリックして左へ移動させます。
ナビゲーション項目を移動させナビゲーションの設定が出来ました
「お問い合わせ」ボタンにリンクを貼ります。
赤枠のリンクをクリックして、リンク先のURLを貼り付け送信をクリックします。
これでボタンにリンクが設定されました。
ソーシャルアイコンにもそれぞれにリンクを貼りましょう。
ソーシャルアイコンが必要ない時にはオプション ➡ 削除を選択し削除します。
これでヘッダナビゲーションの設定は終わりました。
ロゴの設定
ロゴは、先ほどグローバルナビゲーションの設定を行ったヘッダーのテンプレートで設定します。
ロゴの入るスペースをクリックし「ロゴの選択」をクリックしロゴをアップロードします。
ロゴが設定できました。
次に、サイトのキャッチフレーズを入力しておきます。
トップページの設定
左画像の色の付いている箇所、トップページの設定を行います。
トップページはフロントページのテンプレートからの編集と、固定ページからの編集の2種類ありますが、これは編集できるユーザーの権限の違いによります。
ここではフロントページのテンプレートを使い編集していきます。
管理画面 ➡ 外観 ➡ エディタ をクリックします。
デザインのページが開きますのでテンプレートをクリックします。
テンプレートが表示されたら「ドキュメント概要」をクリックします。
リストビューに表示されているグループがトップページの編集箇所になります。
スライドショーの設定
グループの「〈 」をクリックします。
上部カバーがトップ画像になります。ここにスライドショーを設定するので、右側赤枠の「オプション」をクリックして「削除」をクリックします。
上部かばーが削除できました。
赤枠カバーの「オプション」をくりっくして「前に追加」をクリックします。
「段落」が挿入されました赤枠の「ブロックインサイダー」をクリックします。
「パターン」をクリックします。
「featured」の「 〉」をクリックします。表示されたなかから「スライダー素材」を選びクリックします。
スライド画像4枚分の素材が挿入されました。
今回は画像2枚のスライドショーを設定しますので、スライダーアイテムを2か所を削除しておきます。
左側赤枠のスライダーアイテムを見ると見出しや文字・ボタンなど含まれています。こちらで自由にカスタマイズできます。
右側カバーを選んでいるのでカバーブロックが右側に表示されています。
スライドショー2枚の画像を変更してみます。
赤枠「置換」をクリックします。今回は画像をアップロードしますので赤枠をクリック画像をアップロードします。
画像が変わりました。
同じようにしてもう1枚のの画像も変更します。
スライド画像上の見出し・ボタン・文章の変更
ナビゲーションを開きます。
変更する項目を選び画像のように変更しましょう。
コンテンツの作成➀
ロゴ・グローバルナビゲーション・スライドショーの設定が終わりました。
コンテンツの部分、ここでは「お店の情報やサービス」「お知らせやブロブなどの投稿一覧」を作成していきます。
コンテンツの「お店の情報やサービス」の所でケーキの紹介などを入れたいので、スライダーショーの下のカバーの上に赤枠オプションをクリックして「前に追加」でブロックを追加します。
ブロックを追加をクリックしてパターンから選びます。
今回は赤枠「VK Pttan Library」よりパターンを選びたいと思います。
「VK Pttan Library」をクリックするとこのようなページが表示されます。
その中から使いたいパターンを選びます。
カフェ特徴のパターンを使用したいので赤枠の所の「コピーする」をクリックします。
元のページに戻り「ブロックを追加」の所に貼り付けます。
赤枠のカラムの所が使用したいパターンの挿入されたところです。
こちらで画像や文章を変更していきます。
その下のカバーブロックは使用しないので削除しておきます。
挿入したパターンの画像や文章を変更します。
コンテンツの作成②
「お知らせ」の箇所を作成していきます。
お知らせの箇所はドキュメント概要で見ると赤枠のグループで作成されています。
変更したい場合には、グループのオプションをクリックして「前に追加」をクリックします。
「パターンの追加」をクリックし、「ブロックインサーター」をクリックします。
次に「パターン」をクリックします。パターン下の赤枠「投稿」の「 〉」をクリックすると赤枠のようなパターンが表示されますので、ここで好きなパタンを挿入できます。
今回は、今あるパターンで良いのでそのまま使用することにします。
赤枠の「Infomation list」の文字を日本語の「お知らせ一覧」に変更しておきます。
リンク先を見てみましょう。
このようなリンク先が表示されます。
赤枠の「Infomastion」「Read more」を日本語に変更しましょう。
上の赤枠の「サイトを編集」をクリックします。
ブログホーム・テンプレートが表示されました。
赤枠の箇所を変更して「保存」をクリックします。
このように変更できました。
フッターの設定
管理画面 ➡ 外観 ➡ エディタ をクリックします。
デザインのページが表示されたら、パターンをクリックします。
パターンのページが表示されたら、フッターをクリックします。
フッターのパターが表示されます。
赤枠の所をクリックします。
フッターのテンプレートが表示されました。
こちらを編集していきます。
グループのオプションをクリックし「前に追加」をクリックします。
➀「ブロックの追加」をクリックし、次に②「ブロックインサイター」をクリックします。
その下の③「パターン」をクリックします。
「パターン」下の「フッター」をクリックします。
フッターのパターンが表示されました。
使用したいパターンをクリックして追加します。
パターンが挿入されたら、最初にあったフッターのグループを削除します。
後は挿入されたパターの必要箇所を変更します。
トップページ完成
ブロックテーマ「X-T9」でのサイト作成手順について書きました。
やっとトップページが完成しました。
ブロックテーマでは「ブロックパターン」や「ブロックテンプレート」を使用してのサイト作成になるので慣れるまでは戸惑うこともありました。
今回のケーキ屋さんのサイトでは、他に店舗情報・商品紹介・お問い合わせ・プライバシーポリシーなどの固定ページも作成しています。
そちらの作成についても順次書けたらと思います。