LightningとX-T9で効率よくサイトを制作するには?

,

  1. Staff Blog
  2. WordPress
  3. 制作・運用ノウハウ
  4. LightningとX-T9で効率よくサイトを制作するには?

アドベントカレンダー参加中!

この記事は「Vektor WordPress Solution Advent Calendar 2023」の12月5日の記事になります。
LightningとX-T9ですばやくサイトを制作するためのおすすめ情報や、ブロックでコンテンツをつくるときに効率よく作業できる機能・設定などを知りたい人向けに書いています。※有料版プラグインなどの情報も含みます。

こんにちは、ベクトルスタッフのササキです。
前回の、スタッフ 久納さんによる『 子ども用に「できたよシート・クリスマスVar」をWordPressとVK Blocksのブロックで作ってみた』の記事は読まれましたか?パターン職人(芸人)のおひとりである久納さん、またまた可愛いパターンを作っていましたね。いつもアイデアに脱帽です…まだ読んでいない方、特に、お子さんのいらっしゃる方はぜひ読んでみてください。

引き続き、ササキからは「効率よくサイトを制作する」に焦点を当てて、LightningとX-T9のおすすめ情報や、VK Blocks / Pro を使いこなすための設定・機能などをピックアップして紹介します。

普段、お知らせ記事や機能紹介ページをつくる担当ということで、もっと活用してほしいー!という思いを込めて書きます。最後までぜひ読んでください。

制作のベースとなる環境をすばやく用意する

まず、サイトやブログを制作するときには、作り込んでいく環境が必要ですよね。

Lightning も X-T9 も、それぞれのデモサイトを丸ごと再現できる「クイックスタート」を使えば、すばやくセットアップできます。

Lightning G3 クイックスタート | 設定ガイド | Lightning

ビジネスサイトの雛形を5分でセットアップ!Lightning G3 クイックスタートは、真っさらな WordPress 環境にデモサイトと同じデータを丸ごとインポートすること…

X-T9 クイックスタート | 設定ガイド | X-T9 WordPress Theme

ビジネスサイトの雛形を5分でセットアップ!インポートするデータはプラグイン「All-in-One WP Migration」を使い、テーマ / 推奨プラグイン / コンテンツ…

また、X-T9には、有料プラグインを使用してカスタム投稿タイプにも対応したデモサイトもあります。
X-T9 Pro クイックスタート』を使えば、このデモサイトも再現できるんです。上記の設定ガイドでも案内しています。

そして実は、Lightningでも、有料版インポートデータの配布をしています。
Lightning G3 Pro クイックスタート(軽量版)(仮)』です。(仮)が急いで作った感を醸し出していますね……。こちらは軽量版のため、コンテンツは入っていません。各ページは空の状態です。コンテンツは要らないからベースになるすぐに使える環境がほしい人におすすめです。

Lightning G3 Pro クイックスタート(仮) | 設定ガイド | Lightning

Lightning G3の有料版インポートデータを利用すれば、サイト構築のベースとなるPro版の環境を素早く作れます。

『X-T9 Pro クイックスタート』と『Lightning G3 Pro クイックスタート(軽量版)(仮)』は、
ベクトルパスポート 有効期間中の方であれば、VWSのマイアカウントページからダウンロードできます。ぜひご活用ください!

VWSのマイアカウントページでは、ベータ版の新プラグインなどもいち早くダウンロードできたりすることも。時々チェックしてみてくださいね。

VK Blocks / Pro の機能・設定を使いこなす

ベースとなる環境ができたら、VK BlocksやVK Blocks Proのブロックを使ってコンテンツを作っていきます。より効率よく作業するために、以下の機能・設定を使ってみてください。

よく使うFont Awesomeのアイコンをカスタムリストに追加しておく

よく使うFont Awesomeのアイコンをカスタムリストにあらかじめ追加しておけば、Font Awesome のサイトにアクセスして毎度検索して探さなくてもいいんです。

Font Awesome アイコンリストのカスタマイズ

Font Awesome のアイコンリストを好みにカスタマイズできます。

よく利用するブロックだけにして選びやすくする

VK Blocks / Pro のブロックはたくさんありますよね。もし、あまり使わないブロックがある場合は、非表示にできます。インサーターにはよく使うブロックに絞っておくと、選びやすくなります!

たとえば、ブログを書くのに厳選したブロック
ブロックマネージャー設定

よく利用するブロックだけをインサーターに表示させることができます。

よく利用するスタイルだけにして選びやすくする

こちらは「スタイル」です。VK Blocks / Pro が独自に追加しているスタイルのうち、使わないスタイルは非表示にできます。設定サイドバーにはよく使うスタイルのみに限定して表示しておくと、ササッと選びやすくなります。

スタイルの例(グループブロック)
ブロックスタイルマネージャー設定

VK Blocksの追加スタイルであまり使わないものを設定サイドバーのパネルで非表示にすることができます。

オリジナルのスタイルを登録しておく

CSSを書いてブロックに施した独自の装飾は、オリジナルの「スタイル」として登録できます!登録しておけば、設定サイドバーのスタイルから簡単に選べます。

カスタムブロックスタイル設定 ( Pro版のみ )

よく使うデザインスタイルを管理画面であらかじめ登録しておけば、編集画面から選べてすぐ利用できます。

「VK Blocks設定」を他サイトでも使い回す

管理画面【設定】>【VK Blocks】の各設定を他のサイトに移植して使いたいときは、「インポート・エクスポートツール」があります。エクスポートすると、JSON形式のファイルで保存できるので、そのファイルを移植先のサイトでインポートするだけ。VK Blocksの設定はそのまま使い回しできます!

インポート・エクスポートツール

インポート・エクスポートツールは、管管理画面の「設定」 > 「VK Blocks」にある各設定を他のサイトに移植したいときに利用できます。

とにかくパターンを使いたおす

日々「パターンを公開しました!」と、パターンパターン言うてますが、ブロックパターンはまだまだ浸透しておらず、使いこなしていらっしゃる人は多くないと思っています。

VK Pattern Library(VK パターンライブラリ)」を公開したのは、2022年2月です。もうけっこう経っていますね、早いものです。今年は、とくにイケてるパターン作りに力を入れてきましたので、ぜひ使ってみてください。
2023年12月5日時点で272パターンを公開中です!検索項目も増えて探しやすくなっています。

無料で使えるものから、ベクトルパスポート有効期間中のアカウントの方が利用できる高品質なプレミアムパターンまで取り揃えています。

VK パターンライブラリ
VK パターンライブラリ | コピペで使えるWordPress のブロックパターンライブラリ

WordPress のブロックエディタで使えるパターンを公開しています。あらかじめデザインされたパターンをコピー&ペーストすることで、見た目そのままご自分のサイトで使っていた…

VK パターンライブラリ

そして、気に入ったパターンは、お気に入りに登録できる便利機能もありますよ

https://patterns.vektor-inc.co.jp/about/about-favorite/

明日は、いつもパターンを褒めてくれるかんたさんが記事を書いてくれます!「VK Pattern Libraryが最近ヤバいので、ちょっと何か書こうかと思います。」とのことで、お楽しみにー!

この記事を書いた人

ササキ カオリ
ササキ カオリ
株式会社ベクトルでリモートワークしながら某レンタルサーバー会社にも時々勤務しているパラレルワーカーです。WordCamp Osaka 2019登壇しました。フジロックが好き。
フルサイト編集に対応したブロックテーマ X-T9

フルサイト編集対応ブロックテーマ

WordPress テーマ X-T9 は、WordPress 5.9 から実装されたフルサイト編集機能に対応した「ブロックテーマ」と呼ばれる新しい形式のテーマです。
ヘッダーやフッターなど、今までのテーマではカスタマイズが難しかったエリアもノーコードで簡単・柔軟にカスタマイズする事ができます。

パターンを使って

よりクオリティの高いサイトに

パターンとは、WordPressのブロックを組み合わせて作ったデザインテンプレートのようなもの。プロのデザイナーが制作したパターンを300以上公開中!コピペしながら高品質なサイトを簡単に作れます。

VK AB Testing は、ABテストを実施するための WordPress 用プラグインです。ブロックエディターでテストパターンを自由に作成でき、ランダム表示とクリック計測が可能です。Webサイトや広告などの施策の改善にぜひご活用ください。


このデモサイトは Vektor,Inc. のテーマとプラグインで構築されています。ご購入や詳細情報は下記のリンクもご参考ください。

PAGE TOP