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フルサイト編集に関するよくある質問