WordPressフルサイト編集の初心者向けガイド

WordPressの完全なサイト編集機能で、無限の創造性の旅に出ましょう。固定されたテンプレートと限られたカスタマイズオプションに縛られていた時代は終わりました。ヘッダー精巧なフッター、そして記憶に残るスタイリッシュなサイドバーまで、ウェブサイトの隅々までを完全な編集機能で形作ることができると想像してみてください。

WordPressのフルサイト編集機能により、ウェブデザインは消え去り、サイト編集におけるイノベーションの新たな時代が到来します。この革新的なアプローチは、様々なデザインブロックを導入し、サイトのブロックテーマレイアウトを独自のビジョンに合わせて簡単にカスタマイズすることを可能にします。定義済みの構造に縛られることなく、自由に探求し、実験し、真の自己表現をすることができます。

WordPressのフルサイト編集の詳細 

WordPressのフルサイト編集機能を使えば、ウェブサイトのあらゆる側面を簡単にカスタマイズできます。従来のように投稿やページしか編集できなかったのとは異なり、カスタムヘッダーやフッターたり、ブロックを使って複雑なコンテンツエリアを構築したりできるようになりました。

Elementor、サイト全体を扱う人気プラグインはブロックテーマやの初心者でも、サイト全体の編集機能を使えば、比類のない精度と繊細さでアイデアを実現できます。

こちらもご覧ください： Elementor SaaS WordPressテーマのおすすめ

フルサイト編集の主なメリット

簡単に言えば、フルサイト編集により、複雑なツールや専門用語に煩わされることなく、創造性を発揮し、ワークフローを合理化し、Web サイトを将来にわたって使い続けられるようになります。.

主な利点は次のとおりです。

• 完全なデザインコントロール：サイト全体の編集機能で、あなたはボスです。サイトアイコンからアイキャッチ画像スロット、サイトロゴエリア、投稿タイルブロックまで、ウェブサイトの隅々まで、ヘッダーからフッターまで、すべてを思い通りに簡単にデザインできます。

• 統合編集エクスペリエンス：複数のページテンプレート、テンプレートファイル、エディターを行き来する必要はもうありません。WordPressのフルサイト編集機能により、すべてが1つに集約され、WordPressダッシュボードでの作業が簡素化され、サイトの外観をより効率的に調整できるようになります。

• カスタマイズ オプションの強化テーマ フレームに見られるような決まり切ったデザインに飽き飽きしていませんか? フル サイト WordPress 編集では、WordPress プラットフォームに豊富なカスタマイズ オプションが用意されており、フル サイト編集を使用して Web ページのあらゆる側面をカスタマイズし、独自のスタイルを反映できます。

• 合理化されたワークフロー：複数のツールやプラグインを使い分ける必要はもうありません。サイト全体の編集機能によりデザインプロセスが合理化され、時間と労力を節約できるため、最も重要な作業、つまり優れたコンテンツの作成に集中できます。

• プラグインへの依存度の低減：プラグインの過剰使用はもう終わりです。フルサイト編集をご利用ください。以前はプラグインが必要だった機能の多くが、新しいサイトエディターに表示されているように、WordPressブログ投稿に直接組み込まれています。これにより、ページレイアウトを乱雑にする追加ソフトウェアの必要性を最小限に抑えることができます。

• サイトの将来性を確保：WordPressのフルサイト編集機能で、常に時代の先を行くことができます。この革新的なサイト編集機能を活用することでサイトは将来性を備え、テクノロジーの進化に合わせて新しい機能を追加し、常に柔軟に対応できるようになります。

フルサイト編集はブロックテーマでのみ利用可能ですか?

フルサイトの WordPress 編集はブロック テーマに限定されませんが、サイト ブロックは機能を最大限に活用できるように設計されています。.

WordPress ウェブサイトがテーマに統合されたすべてのブロック上でどのように実行されるかは次のとおりです。

• ブロック テーマには、投稿コンテンツ ブロックに加えて、ヘッダー テンプレート、フッター、サイドバー、その他のテンプレート パーツを含む列ブロックが備わっています。.

• 従来のテーマ カスタマイザーに代わる、グローバル スタイルと設定を制御する完全なサイト編集テーマとして theme.json ファイルを使用します。.

• 必須ではありませんが、ブロック設定はサイト全体の編集用に最適化されており、ユーザーはテーマテンプレート全体にブロックを追加できます。.

• 現在、160 を超えるブロック設定が利用可能ですが、WordPress コミュニティで既に人気のある何千もの従来のテーマと比較すると、その数は比較的少ないです。.

ブロック自体には次の 2 つの種類があります。

• 画像、ボタンなど、公開時に既知のコンテンツが含まれます

• 動的 (テーマ) ブロックはテンプレート構築用に設計されており、投稿フィード、タイトル、おすすめ画像などのコンテンツをサイトのバックエンドから動的に取得できます。.

続きを読む： WordPressでカスタム投稿タイプを簡単に作成する方法を学ぶ

フルサイト編集を使用する前に知っておくべきこと

サイトエディターインターフェースを使いこなし、WordPressサイトをカスタマイズする前に、フルサイト編集の要件と潜在的な制限事項を理解することが重要です。この機能は強力ですが、すべてのWordPressユーザーがすぐにその全機能を利用できるわけではありません。.

ブロックテーマのみとの互換性

フルサイト編集機能はブロックテーマでのみご利用いただけます。クラシックテーマをご利用の場合、テンプレートエディターは制限されているかアクセスできず、ダッシュボードに新しいサイトエディターインターフェースが表示されません。テーマディレクトリで「フルサイト編集」タグを確認して、互換性のあるブロックテーマをインストールしてください。

ブロックテーマは、ブロックベースのレイアウトシステムを通じて、ヘッダーとフッターのテンプレート、ブロックスタイル、カスタムページをサポートするために特別に設計されています。これらのテーマは、 theme.jsonファイルグローバルスタイル、コンテンツの幅、テンプレート構造を定義し、従来のカスタマイザーオプションに代わるものです。

WordPressのバージョンを確認する

フルサイト編集機能はWordPress 5.8で導入され、その後のバージョンでさらに進化しました。テンプレートパーツ、クエリループブロック、スタイルバリエーションを快適にご利用いただくには、最新のWordPressリリースへのアップデートを強くお勧めします。古いバージョンでは、ブロックマークアップや新しいテーマで使用される特定のブロックがサポートされていない場合があります。

学習曲線を理解する

従来のエディタワークフローやビルダープラグインをご利用の場合、フルサイト編集への切り替えは慣れないかもしれません。3点メニュー、ブロックツールバー、そして新しいレイアウトツールは豊富な機能を提供しますが、少し慣れが必要です。新しいエディタでウェブサイト全体の構造をじっくりと見ていきましょう。.

ステージング環境を使用する

ブロックテーマを有効化したり、ビルダープラグイン、ステージング環境で変更内容をテストすることをお勧めします。これにより、移行によって現在のページ構造、HTMLファイルの構成、カスタムCSSが損なわれることはありません。

これらの基本事項を理解することで、落とし穴を回避し、WordPress のフルサイト編集エクスペリエンスを最大限に活用できるようになります。.

WordPressでサイト全体を編集する手順

WordPress ウェブサイトを次のレベルに引き上げる準備はできていますか？以下の簡単な手順に従って、フルサイト編集の可能性を最大限に引き出し、サイトのあらゆる側面を簡単かつ正確にカスタマイズできるようになります。.

ステップ1：互換性のあるテーマを選択する

WordPressには、サイト全体を編集できるテーマが150種類以上あります。WordPressから無料で入手することも、有料のテーマを購入することもできます。WordPressから無料のテーマを選んでみましょう。まず、WordPressダッシュボードにログインし、 「外観」 → 「テーマ」。次に、 「新規追加」。

次に、 「機能フィルター」フィルターを設定します。テーマ、機能、レイアウトで並べ替えることができます。フィルターを適用するには、「サイトエディター」チェックボックスをオンにして、 「フィルターを適用」を。

オプションが表示されます。お好きなテーマを選ぶか、このガイドではTwenty Twenty-Twoテーマをお選びください。テーマを選択したら、有効化すれば準備完了です！

こちらもお読みください：最高のWordPressブロックテーマを探る

ステップ2: テンプレートのカスタマイズ

Twenty Twenty Two テーマに焦点を当てて、新しいテーマのカスタマイズを始めましょう。

• テーマを有効化: テーマを選択したら、有効化してカスタマイズを開始します。

• エディターにアクセスする:編集ツールにアクセスするには、 「外観」 → 「エディター」

• テンプレートを探す：エディターに入ったら、まずはホームページテンプレートから始めましょう。他のテンプレートを探すには、WordPressロゴをクリックし、「テンプレート」をクリックしてください。

• 新しいテンプレートを作成する: [新規追加] ボタンを使用して、サイトのニーズに合わせた独自のテンプレートを作成します。

• テンプレート パーツのカスタマイズ: ヘッダーやフッターなどのテンプレート パーツを変更して、サイトの外観を調整します。

• ブロックを追加：ブロックを組み込むことでサイトの機能を強化できます。青い「+」ボタンブロックを追加し、。

• 既存のブロックを編集する: 既存のブロックをクリックしてその内容や設定を変更することで、必要な調整を行うことができます。

続きを読む: WordPressの更新と公開の失敗エラーを修正するためのヒント：究極のリスト

ステップ3: グローバルスタイルの取得

フルサイト編集テーマの際立った特徴の一つは、グローバルスタイルを設定できることです。これにより、サイト全体のフォント、カラー、間隔を簡単にカスタマイズできます。統一感のある外観にしたい場合でも、特定のブロックに特定のスタイルを適用したい場合でも、この機能により、従来のテーマに比べて大幅に時間を節約できます。Twenty Twenty Twoテーマでグローバルスタイルにアクセスしてカスタマイズする方法は次のとおりです。

• グローバル スタイルへのアクセス: サイト エディターの右上にあるスタイル アイコンをクリックして、サイトのグローバル スタイルにアクセスします。

• 利用可能なスタイルを参照 「スタイルを参照」をクリックして、Twenty Twenty Two テーマで利用可能なスタイルをご覧くださいサイトに適したカラースキームを選択できます

• タイポグラフィ設定：タイポグラフィセクションでは、テキストとリンクのフォントオプションをカスタマイズできます。フォントファミリー、サイズ、行の高さ、太さを調整して、希望の外観を実現します。.

• カラーカスタマイズ：カラーセクションでは、グローバルカラーパレットで使用する色を編集できます。背景、テキスト、リンクの色を様々なオプションから選択できます。Twenty Twenty Twoテーマには、17色の単色と20色のグラデーションが用意されており、ブランディング用にカスタムカラーやグラデーションを追加することもできます。.

• パディングの調整：最後に、レイアウトのパディングを微調整します。上、左、右、下のパディングを一括または個別に設定することで、サイトのコンテンツに十分なスペースが確保され、視覚的に魅力的になります。

続きを読む: WordPress の変更が反映されない？簡単に修正できます！

ステップ4: テーマブロックの使用

ブロックエディターでは、サイトエディターでページテンプレートを作成するための90以上のブロックにアクセスできます。これらのブロックの中には、サイトのフロントエンドに動的なコンテンツを表示する動的なテーマブロックがあります。例えば、単一投稿テンプレートでは、投稿タイトル、投稿のアイキャッチ画像、投稿コンテンツといったブロックが表示されます。これらは、ブログ投稿を表示する動的なテンプレートを作成するのに便利です。.

• ヘッダー、フッターなどにテーマブロックを使用する：テーマブロックは27種類あります。そのうちのいくつかを使って、サイトの新しいヘッダーテンプレートを作成する方法を見ていきましょう。まず、「テンプレート」メニューに移動し、「空のテンプレート」を選択して開始します。

• レイヤー ビューのナビゲート: ページで使用されているブロックを確認するには、サイト エディター画面の左上にあるレイヤー アイコンをクリックします。

• ヘッダーにブロックを追加する：青い「+」アイコン、テーマブロックのオプションまでスクロールダウンします。テンプレートパーツブロックを選択し、空白ページにドラッグします。名前を付けて「作成」をクリックします。次に、上部に20pxのスペースを確保するスペーサーブロックと、33/33/33列のバリエーションを持つ列ブロックを追加します。

• ヘッダーのカスタマイズ：サイトロゴ、ナビゲーション、ソーシャルリンクブロックを列に追加します。必要に応じて、画像をアップロードしたり、メニュー項目を追加したり、ソーシャルメディアアイコンを追加したりできます。

• レイアウトの調整 「列設定」 → 「幅」を選択し、各列の幅をそれぞれ20%、60%、20%に調整します。これにより、ヘッダーの間隔が適切に確保されます。

• テンプレートの保存: ヘッダーのデザインに満足したら、 「公開」テンプレートを保存します。

注目記事： Elementor SaaS WordPressテーマのおすすめ

ステップ5：デザイン開始のためのブロックパターン

テンプレートをデザインする際に、ブロックパターンを使うとブロックを簡単に追加してデザインを簡素化できます。WordPressでは標準のブロックパターンを提供していますが、独自のブロックパターンを作成することもできます。ブロックパターンへのアクセス方法と使い方は以下のとおりです。

• ブロックパターンへのアクセス：青い「+」アイコン、「パターン」タブに移動します。フッター、ヘッダー、ボタン、ギャラリーなど、さまざまなカテゴリが表示されます。

• パターンの編集：各パターンはデザインに合わせてカスタマイズできます。個々のブロック内で、色、フォント、パディングスタイルを調整できます。

• パターンを保存：カスタマイズしたパターンを保存するには、リストビューの省略記号メニューをクリックし、「再利用可能なブロックに追加」を選択します。また、テンプレートパーツとして保存して、後で使用することもできます。

ブロック パターンを使用すると、デザイン プロセスが効率化され、プロフェッショナルな外観のテンプレートを簡単に作成できるようになります。.

さらに読む：ソーシャルメンションを監視するための最高のサイト評判管理ツール

フルサイト編集を使用する際のプロのヒントとよくある落とし穴

開始方法をしっかりと理解できたので、ベストプラクティスに焦点を当て、WordPress サイトエディターを使用して構築する際に発生する可能性のあるいくつかの一般的な課題に注意することになります。.

大きな変更を行う前に必ずバックアップを取る

必ずバックアップを作成してください。これにより、ブロックの競合や現在のページに影響するブロックの削除によってコンテンツが破損した場合でも、コンテンツを保護できます。

高度な制御にはコードエディタを使用する

サイトエディター内のコードエディターを使用することで、さらに高度な機能を使用できますこれは、個々のブロックのレイアウトをカスタマイズしたり、HTMLコメントを挿入したりする際に特に便利です。また、ビジュアルエディターでは不可能な、配置、間隔、コンテンツ幅の微調整も可能です。

クエリループブロックをマスターする

クエリループブロックは、フルサイト編集における動的コンテンツ構築の基盤です。ページテンプレートだけでなく、サイト上の任意の場所に投稿グリッド、商品リスト、カテゴリ別フィードを表示できます。ループ設定の調整、フィルターの追加、再利用可能なブロック構造を使ったページコンテンツのカスタマイズ方法を学びましょう。

クラシックテーマとブロックテーマの混在を避ける

クラシックテーマとFSEツールを併用すると、不整合が生じる可能性があります。フッターやヘッダーテンプレートが正しく表示されない場合や、サイトエディターインターフェースにアクセスできなくなる可能性があります。問題を回避するために、テーマ開発者はブロック互換のテーマのみを使用することを推奨しています。.

スタイルのバリエーションを探索してカスタマイズする

サイトのフォント、を変更できるスタイルバリエーションが組み込まれています。これらのバリエーションはページコンテンツに影響を与えることなく簡単に切り替えられるため、サードパーティのページビルダーを必要とせずに柔軟なデザインを実現できます。

再利用可能なブロックとテンプレートパーツを使用する

CTAセクション、などの要素のデザインの一貫性を維持できます。エディターの3点メニューからブロックやパターンを直接保存し、複数のテンプレート間でレイアウトをより効率的に整理できます。

プラグインの競合に注意する

一部の古いビルダープラグインやクラシックエディタ拡張機能は、FSEの機能と競合する可能性があります。可能な場合は、ブロック互換のビルダープラグインを使用し、新しいテンプレートエディタにすでに組み込まれている機能と重複する競合ツールを無効にしてください。.

これらのヒントに従い、よくある落とし穴に注意することで、 WordPress テンプレートを、フルサイト編集を使用して、より高速で、よりスリムで、将来にも対応できる Web サイトを構築できるようになります。

結論

WordPressのフルサイト編集機能を使えば、創造性を解き放ち、ウェブサイトのデザインを完全にコントロールできます。互換性のあるブロックテーマを探し、ブロックエディターをマスターし、コミュニティリソースを活用し、ベストプラクティスを実践し、継続的な学習に励みましょう。.

これらの実用的な手順に従うことで、可能性の世界を広げ、ワークフローを合理化し、この革新的な WordPress 機能を使用してオンライン プレゼンスの将来性を確保することができます。.

WordPressフルサイト編集に関するよくある質問