この記事では、Naiba サイト構築ノートがWordPressサイトにBlocksyテーマをインストールして企業公式サイトを構築する方法を紹介します。
Blocksyテーマの紹介
Blocksyは、高速でモダンなWordPressテーマであり、高度なWooCommerceをサポートし、ブロックエディターと完全互換性があります。
Naibaは特別な比較は行っていませんが、感覚的にはBlocksyはAstraよりも軽量だと考えており、NaibaもよくBlocksyを使ってサイトを構築しています。
Blocksyには無料版と有料版があり、Naibaでは有料版を販売しています。必要な方はこちらから購入。
Blocksyの強み：
- 究極の読み込み速度（軽量なコードアーキテクチャ）
- Gutenbergエディター、Elementor、Brizyなどのページビルダーと完全互換
- リアルタイムカスタマイザーによる直感的なビジュアル編集体験
- WooCommerceに最適化されており、ECサイトに適しています
- 完全なレスポンシブデザインで、すべてのデバイスに対応
Blocksyテーマのインストールと基本設定
Blocksyテーマインストールチュートリアル
WordPressサイトの管理画面（まだWordPressサイトをお持ちでない方は、先にWordPressサイトを構築してください。詳細はWordPressチュートリアルを参照）：
- WordPress管理画面にログインし、„外観“＞„テーマ“に進みます
- „新規追加“をクリックし、„Blocksy“を検索します
- Blocksyテーマを見つけたら、„インストール“ボタンをクリックします
- インストール完了後、„有効化“をクリックしてテーマをアクティベートします
テーマ対応プラグインの有効化
Blocksyのテーマ機能はすべて付属プラグインで実現されており、Astraテーマと同様に、無料プラグインと有料プラグインに分かれています。有料版を購入した場合は、プラグイン画面から有料版プラグインをアップロードしてください。
無料版を使用する場合は、「Blocksy Companionをインストール」ボタンをクリックしてプラグインをインストールするだけです。
有料版は機能が豊富なので、私たちは有料版をアップロードしています。以下のチュートリアルで説明している設定が表示されない場合は、無料版ではサポートされていないことを意味します。
Blocksy Companionプラグインの紹介
Blocksy Companionをインストールして有効化した後、管理画面のメニューにBlocksyメニューが表示されます。
Dashboardメニューは、Blocksyテーマの設定機能とドキュメント全体のインターフェースです。
- ホーム - テーマ設定画面と関連ドキュメントへのクイックアクセス
- Starter Sites - プリセットされたデモテンプレート
- Extensions - テーマで個別に有効化できる機能
- 役立つプラグイン - テーマが推奨するプラグイン
- 更新履歴 - テーマの更新記録
自分でウェブサイトの外観をデザインできない初心者の方は、Starter Sitesから気に入ったデザインをインポートし、それを修正するのが良い選択です。
Extensionsでは、Cookieの通知が必要な場合、Cookies Consentを有効にすると、サイトにCookieポップアップが表示されます。
スーパーメニューが必要な場合は、Advanced Menu機能を開放しました。
Shortcuts Bar機能も有効にできます。これにより、モバイルでサイトにアクセスした際、画面下部に連絡先情報のショートカットバーが表示されます。
Blocksyでゼロからサイトをカスタマイズ
このチュートリアルをご覧になるほとんどの方が初心者であることを考慮すると、空白のサイトから装飾を始めるのは難易度が高く、仕上がりもあまりプロフェッショナルに見えない可能性があるため、プリセットテンプレートからインポートして詳細を修正することをお勧めします。
デモデータをインポート
デモデータのインポートパス：WordPress管理画面 → Blocksy → Dashboard → Starter Sites
多くの方が外国貿易業界にいらっしゃることを考慮し、ここでは無料のBusinessテンプレートをインポートすることを選択しました。
インポート時にはPage Builderの選択が求められます。WordPressの基本概念と用語の記事で、Page Builderとは何かをご紹介しました：
WordPressページビルダープラグインは、ウェブサイトページの作成と編集に使用されるツールで、コードを書かずにユーザーが簡単にページを作成・編集できるようにします。ページビルダープラグインは通常、ビジュアルインターフェースを持ち、ユーザーはドラッグ＆ドロップなどの方法でページを作成・編集できます。
Blocksyテーマは、Gutenberg、Brizy、Elementorの3種類のページビルダーをサポートしています。
初心者はElementorを選択することをお勧めします。
性能面では、Gutenbergが最も高速であるはずで、かつWordPress公式が現在推奨しているエディターであり、互換性もより良いでしょう。しかし、Gutenbergの現在の操作方法はElementorほど柔軟ではなく、初心者がElementorで1日かけて作り上げられるものを、Gutenbergでは数日かけても理解できないかもしれません。そのため、初心者はわずかな性能差にこだわるのではなく、黒猫でも白猫でもネズミを捕まえられる猫が良い猫であり、自分が使いこなせるビルダーが最良のビルダーです。
これらのコンテンツをすべて選択してインポートし、そのままNext
をクリックします。インストール必要なプラグイン。
ページ作成＆ナビゲーションメニュー変更
ページを作成
デモデータのページは、企業サイトに必要なページと一致しないため、まず必要なページを作成し、ナビゲーションメニューを修正します。
インポートしたこのデモデータには、ホーム、会社概要、ブログ、お問い合わせの4つの主要ページが含まれていますが、企業サイトには通常、製品とサービスページもあります。
ここではまずサービスページを追加します。製品ページについては後ほど個別に説明します。
このチュートリアルでは、Our Services、Service 1、Service 2の3つのページを作成します。ページタイトルを追加して公開するだけで、具体的なカスタマイズについては後述します。
Sample Pageというページと、不要なPrivacy Policyページは削除できます。
ナビゲーションメニューを修正
修正パス：WordPress管理画面 → 外観 → メニュー
先ほど追加したサービスページをナビゲーションメニューに追加し、ドラッグして順序を変更します。その後、メニューを保存。
この時点でサイトのフロントエンドに戻ると、有効になったナビゲーションメニューが表示されます。
テーマカラーを変更
修正パス：WordPress管理画面 → 外観 → カスタマイズ → 色
フロントエンドで上部ナビゲーションメニュー内のカスタマイズをクリックして直接入ることもできます
この修正後も、まだ色が変わっていない部分があります。後述するElementorでのページ編集時に説明しますので、チュートリアルをよくご覧ください。
ヘッダーを変更
修正パス：WordPress管理画面 → 外観 → カスタマイズ → ヘッダー
デフォルトのヘッダーは3行で構成されています：トップ行、メイン行、ボトム行
- トップ行は、一般的にtopbarと呼ばれ、連絡先やソーシャルメディアを配置するために使用されます
- メイン行は、ナビゲーションメニューとボタンを配置します
- ボトム行は通常あまり使用されません
各行を選択すると、行の設定画面が表示されます。
ヘッダーに何を追加したいかは、対応する位置に直接ドラッグするだけです。
スクリーンショットの左側の要素の横にあるヘッダーをクリックすると、さらに多くのヘッダー設定オプションが表示されます。例えば：
- Sticky Functionality - 画面の上部に固定するかどうか
- Transparent Functionality - 透明にするかどうか
フッターを変更
修正パス：WordPress管理画面 → 外観 → カスタマイズ → フッター
フッターの設定方法はヘッダーと似ています。上図のウィジェットエリアの内容は、WP管理画面 → 外観 → ウィジェットで設定すると、より便利です。
このテーマに標準で付属するフッター効果のデザインが面倒だと感じる場合は、elementorで作成することもできます。これについては後述します。
ページコンテンツを変更
ヘッダーとフッターの設定が完了したら、具体的なページの修正を開始できます。
修正パス：
- サイトフロントエンド → 上部adminbar → Edit with Elementor
- WP管理画面 → ページ → すべてのページ → Edit with Elementor
ページ内容を変更する前に、まずElementorのグローバルカラーとフォントを変更しましょう。
Elementor編集インターフェースに入ったら、左上のElementorアイコンをクリックし、Site Settingsを選択します。
主にグローバルカラーとグローバルフォントを設定します。他の内容も設定したい場合は設定しても構いませんが、よくわからない場合はデフォルトのままにしておいてください。
このテーマのデモデータをインポートしたものは、まだSectionデザインを使用しています。現在の最新版Elementorは全面的にContainerレイアウトを採用しているため、「Convert to container」ボタンが表示されます。このボタンをクリックして変換できます。
変換が完了したら、以前のSectionを削除します。（変換後にスタイルが変わることがあり、自分で調整する必要があります。調整方法がわからない場合は変換せず、Sectionのまま使用するか、Naibaに有料で依頼して処理してもらってください）
Elementorの基本的な使用は非常に簡単です。変更したい場所をクリックし、左側の編集エリアで内容の変更やスタイルの調整を行います。
調整が完了したら、右上のPublishボタンをクリックしてページを更新します。
空白ページをデザイン
以前に作成したOur Servicesページを例に、Elementorを使用してページデザインを編集する方法を紹介します。
変更パス：WP管理画面 → ページ → すべてのページ → 編集
編集ページを開くと上図のようになります。まず、1の位置にあるBlocksy ページ設定ボタンをクリックします。通常、設定が必要な項目は以下の通りです：
- ページタイトル → 禁止
- コンテンツエリア垂直間隔 → 禁止
設定完了後保存し、その後„Elementorで編集”
Elementor編集インターフェースに入ると、内容が空なので自分で作成する必要があります。
初心者にとって自分で作成するのは少し面倒かもしれません。簡単な方法として、テーマがすでにElementorでデザインしているページから、気に入ったデザインをマウスの右クリックでコピーし、新しく開いたこのページで右クリックして貼り付け、その後内容を変更する方法があります。
自分でデザインする必要がある場合は、まず1の位置からコンテナまたはグリッドを選択し、必要な要素をコンテナ内にドラッグします。
製品管理機能を追加
WordPressチュートリアルの記事の„製品管理の追加」の部分で紹介されているように、製品管理を実現するには以下の方法があります：
- WooCommerceプラグイン
- Portfolio作品集
- カスタムページ
- ACFカスタムフィールドの使用
- Naiba サイト構築ノート B2B製品管理プラグイン
ここでは、WooCommerceまたはNaibabiji B2B プロダクトショーケース二つの方法で実現できます。
| ソリューション | 技術的難易度 | デメリット |
| WooCommerce | 中程度 | 肥大化し、ハードウェア構成を必要とする |
| Portfolio | 簡単 | デザイン制限があり、事例紹介向き |
| カスタムページ | 簡単 | デザイン力が問われ、多数の製品には不向き |
| ACFカスタムフィールド | 难 | 初心者には不向き |
| B2B製品管理プラグイン | 最も簡単 | 使用中のテーマに必ずしも適合せず、スタイルの微調整が必要 |
将来的に直接商品販売を考えている場合や、より多くの機能カスタマイズが必要な場合はWooCommerceを検討できます。単純な製品管理と表示のみが必要な場合は、Naibabiji B2B プロダクトショーケース
サイト最適化
サイト構築完了後、必要な最適化作業については、初心者の方はあまり悩まず、自分ができる作業だけを行えば十分です。
1、SEOプラグインのインストール
操作パス：WordPress管理画面 → プラグイン → プラグインのインストール、SEOで検索し、表示される人気プラグインをどれでもインストールできます。
SEOプラグインの原理は同じで、どれを使えば必ず良いというものはありません。どれか一つインストールしてください。
2、使用していないページのクリーンアップ
デモデータでインポートされたページは、すべてが必要なわけではありません。不要なページは削除してください。
3、速度最適化プラグインのインストール
操作パス：WordPress管理画面 → プラグイン → プラグインのインストール → „Converter for Media“で検索
画像をwebp形式に変換するには、Converter for Mediaをインストールできます。宝塔パネルユーザーの場合は、nginx設定を手動で変更する必要があります。参考：宝塔パネルでnginx設定を修正し、Converter for Mediaプラグインをサポート
キャッシュプラグイン：WordPress管理画面 → プラグイン → プラグインのインストール → „cache“で検索し、表示される人気プラグインをどれか一つインストールしてください。
ホスティングサービスにキャッシュプラグインが標準で付いている場合は、そちらを直接使用してください。有料キャッシュプラグインを盲信する必要はありません（お金があれば購入して使用しても構いません。一定の効果はあります）。
宝塔パネルユーザーの場合は、以下の使用も検討できます：宝塔パネルでWordPressにNginx FastCGIキャッシュを有効化
まとめ
これでBlocksyテーマのチュートリアルは終了です。不明な点があればコメントしてください。
