GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする

 

ワードプレスの検索エンジンは最悪

WordPressを使っている人で、その検索エンジンを高く評価している人を知りませんし、最初のバージョンからほとんど進化していないこともいまだに理解していません。

動作が原始的なだけでなく、何の設定もできない。検索結果ページの外観にも不満が残る。使用するテンプレートによっては、少しはマシなデザインになるかもしれませんが、全般的にはまだ前時代的です。

結果の見た目は、Relevanssi(データベースの重さは3倍になるが)のような無料プラグイン(有料版あり)や、外部サービスAlgolia(月1万検索リクエストまで無料)と接続するこの他のプラグインでCSSと応答性を少し改善することができます。

しかし、パフォーマンスの問題はまだ格闘中なので別の日に譲り、純粋に美的な改革に対応するために、以下のものを使用することにします。 ジェネレートプレス(GP)および ジェネレートブロック(GenerateBlocks(GB)です。

ジェネレートプレス とGenerateBlocks

GPと GBは、まだ若いプロジェクトの2つのツールで、使い勝手を改善する必要があります。GBは、Elementorなどのビルダーを使用していた場合に期待されるような学習曲線を提供しません。

この例でわかるように、GenerateBlocksで特定のものを構築するためのいくつかのプロセスは、より長く、より手間がかかり、最初の試行では少し絶望的になることがあります。ブロックをどんどん追加していくと、事態はより複雑になっていきます。

その一方で、一度その仕組みを理解し、使いこなせれば、各要素のルック&フィールをより自由にコントロールできるようになります。

その難しさは、ドキュメントと完璧なサポートによってバランスが取れており、クリエイターが自分の能力ではない特定のデザイン問題についてさえもサポートしてくれるため、公平でクリーン、そして軽いコードという彼らの哲学に忠実であることから、考慮すべき素晴らしい選択肢であると言えます。

ブロック要素

YouTube video

Blocks Elements(以下、Elements)は、2020年7月にGeneratePress Premiumバージョン1.11.0にて追加されました。通常のフックとして使用することで、コードをいじることなく、ブログのほぼすべての場所にコンテンツを挿入することができます。

GenerateBlocksと組み合わせると、WordPressのブロックエディターを使って、フック、ヘッダー、フッター、サイドバー、「ヒーロー」ページ、コンテンツテンプレートなどを作成することができます。

では、本題に入りましょう。

構造テンプレート

まず最初に、「構造テンプレート」と呼ばれるものを作成します。このステップは任意ですが、ある日突然、クリック数回で何かを変更したくなったときのために、作っておいて損はないでしょう。

この名前をつけたのは、構造的な側面だけを定義し、その内容は定義しないためです。つまり、ヘッダー、フッター、ウィジェット、サイドバー、幅などを表示するかしないか、また、残りのステップのブロックの名前と混同しないようにするためです。

メインメニューの外観/要素またはトップから、私たちは、要素の作成と管理にアクセスできます。

Elements de GeneratePress- Layout o diseño

私たちに関係する特定の用途のために、新しい要素を追加するときは、「 デザイン」を選択し、「作成」を押します。

次に、その要素をどのページに適用するかを指定します。そのためには、「表示ルール」タブに移動し、位置でドロップダウンから「検索結果」を選択します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする

要素には、さまざまなカスタマイズの可能性があります。ご覧のように、このドロップダウンでは、ブログのほとんどの位置を選択して、そこにこれらの設定を適用することができます。

また、非表示にする要素を決めることもできます。私の場合、サイドバーを表示しないオプションを1つだけ使うつもりなので、「コンテンツ(サイドバーなし)」を選択しました。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 2

サイドバーを非表示にする方法は他にもありますが、この方法が最も簡単で早い上に、この要素/テンプレートを「ドラフト」状態に戻すか、直接「アンパブリッシュ」すれば、変更内容を元に戻せます。

さらに、「要素の無効化」タブでは、ページを実質的にクリーンな状態にすることができます。Elementorの「Canvasページテンプレートに相当するもので、若干の改良が加えられ、よりシンプルに使えるようになったと言えるでしょう。

Desactivar Elementos en GeneratePress

良い習慣として、設定タブの1つでも推奨されていますが、タイトルが十分に説明的でない場合や長すぎるのを避けたい場合に備えて、各要素が何をするのかを内部メモで文書化することがあります。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 4

私は、すべてのものにメモやコメントをつけることに慣れました。なぜなら、多くの修正を行い、時間が経つと、どこで、あるいはどのように修正されたかを忘れてしまうことが避けられないからです。そのため、内部メモには、何か問題が発生したときや、新しい修正を加えたいときに、その手順をたどるのに必要な情報がすべて含まれています。

このテンプレートを公開することで、結果ページを好みに合わせて設定することができますが、もちろん、検索を行う際には空白になります。

このテンプレートは、この作業を行う間、下書きのままにしておいて、準備が整ったら公開することができます。

外観テンプレート

これは単なる要素ですが、この小さなガイドでは「外観テンプレート」と呼んでいます。というのも、当時、私はものの名称やさまざまな可能な使い方に少し混乱していたからです。

ここからが本格的なカスタマイズの始まりです。

新しい要素、今回はブロックを作成し、それに説明的な名前を付けます。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 5

GenerateBlocksコンテナを追加し、そのコンテナの中にQuery Loopブロックを配置します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 6

そしてこれが、これから見ることができるものです。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 7

私は結果のネイティブな構造を再現するために「Start blank」を選択しましたが、このブロックが提供するテンプレートはどれでも選ぶことができます。

というのも、1つのテンプレートで作業を始めると、他のテンプレートを適用することができなくなり、変更したい場合はすべてのプロセスをゼロから始めなければならないからです(GBを解決する必要があるものです)。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 8

テンプレートを選択した後、クエリループブロックを選択すると(1)、右側に「ブロック」タブが表示されます(2)。それをクリックし、「クエリパラメータ」の「テンプレートからクエリを継承する」(3)というオプションにチェックを入れます。最後に、一番下の「表示ルール」/「位置」(4)で、「検索結果」を検索して設定し、下書きとして保存します。

クエリループを展開すると、このようになります:

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 9

Query Template」の中に別のグリッドブロックを追加し、必要な構造を選択します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 10

この例では、列として機能する2つのコンテナの うちの1つを使用する予定です左のカラムには特集画像を、右のカラムにはエントリーの抜粋を表示します。

また、3つのコンテナを使って、中央の1つをスペースとして構成することも可能です。私は主張します、可能性はたくさんあり、それらを使って遊ぶことが一番です。

お気づきかもしれませんが、私たちは、見せたいものの最終的な側面を構成するすべてのピースを備えたコンテナを、ほとんどゼロから作り上げているのです。この場合は検索結果ですが、他のコンテンツでも同じことができます。

では、この2つのコンテナを空にしてみましょう。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 11

1つ目のコンテナを選択し、リサイズオプションまでスクロールするとわかるように、幅を33に設定します(実際には33.33に設定されています)。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 12

2つ目のコンテナも同様に、66を選択します(自動的に66.66に設定されます)。もちろん、ポイントは、使用するすべてのコンテナを100に加算して、ページの水平スペースからはみ出さないようにし、同じ行に表示されるようにすることです。

さて、1つ目のコンテナを選択した状態で、中にGenerateBlocksの画像ブロックを追加します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 13

するとどうなるかというと、異なる画像スペースが表示されることになります。これは、ブロックがLoopを検知して、その動作を再現しているからです。検索エンジンで10個の結果が表示されたら、それが表示されるスペースです。このまま、画像コンテナで作業を続け、残りの部分(結果ページのプレビューに過ぎない)はパスしてください。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 14

画像(1)を含むコンテナを再度選択します。右側のブロックのメニューで、「動的データを有効にする」を選択し、有効にします(2)。背景画像ソースで「注目画像」を選択し(3)、エディタに画像が表示されます。

リンクソースで「個別リンク」を選択し(4)、各画像が対応する投稿にリンクするようにし、再び下書きとして保存します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 15

次に、2つ目のコンテナを選択し、GenerateBlocksから「Headline」ブロックを追加します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 16

ダイナミック・データが有効になっている「ヘッドライン」ブロック(1 )を選択し (2)、前のプロセス(3)を繰り返しますが、今回はコンテンツのソースに「タイトル」を選択し(4)、リンクのソースに個々のエントリーを選択します (5)

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 17

最後に、この手順でエントリーの抜粋を表示するための「タイトル」ブロックを、下にもう一つ追加します。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 18

追加したら、また同じ作業を繰り返します。この新しいブロックが選択された状態(1)で、動的データ (2)とデータのソース(3)として、現在のエントリとコンテンツのソース「抽出物」(4)をアクティブにします。今、あなたはまた、単語で抽出の長さを設定することができます(5)

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 19

最後に、結果の下に表示されるページネーションを追加します。これを行うには、クエリループブロックを選択し(1)、編集バーにある小さな+マークとドットをクリックします(2)。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 20

ページネーションは、ボタンのブロックで構成され、あなたが探している外観に合うフォーマット、色、形を与える必要があります。 可能な設定はすべてブロックのメニューにあり、モバイル、タブレット、デスクトップ用に各ブロックを微調整するオプションが常に用意されているので、少ないわけではありません。

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 21

この記事をあまり長くしないように、この辺にしておきます。

まずはテスト環境で、エディターが提供するプレビュー以上の効果を確認し、その通りに表示されることを確認したら公開することをお勧めします。

また、冒頭で提案したデザインブロック(私たちはこれを「デザインブロック」と呼んでいます)を実行した場合、そのデザインブロックは「デザインブロック」と呼ばれることになることを忘れないでください。 構造テンプレート下書きのままにしていたものを、公開する必要があります。

これを起点に、美的な好みに応じて、結果ページの外観をさらにカスタマイズしていくことになります。

カスタマイズの可能性が広がる

GeneratePressとGenerateBlocksでWordPressの検索結果画面をカスタマイズする 22

例えば、タイトルと抜粋の間に2つのコンテナを持つグリッドブロックを配置し、そこに出版日やエントリーの著者の番号など、好きなものを編集したり追加したりし続けることができます。

また、WordPressで検索しても結果が出ない場合のデフォルトページ用に、別のテンプレートを作成し、ヘルプボタンや訪問者を助ける要素を追加することもできます。

フォントの種類やサイズを変更したり、左右に揃えたり、要素の間隔や寸法を調整したり、画像や図形を追加して背景色を変えたり、アイコンやボーダー、リンクのホバー効果、コンテナのシャドウなどを追加することもできます。

CSSをいじったり、テンプレートファイルを触ったりすることなく、エディターから離れることなく、これらすべてを行うことができます。

ここでは、私の検索結果の基本的なレイアウトを 試すことができますが、読書時間や訪問回数を追加したり、空の抜粋を書いたり、不足している特集画像を追加したりと、まだいくつか改良する必要があります。

ボーナスボール:検索結果に「Showing (number) results for: ( searchedword )」と表示させる必要がある場合、 必要なコードはこちらです。のコードとQuery Loopブロックで動作させるための手順を、GBサポートのDavidに教えてもらいました。


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

関連記事

電子メールによる購読

広告なしの記事全文を、公開と同時に無料で受信できます。 フィードの全コンテンツは、外部サービスを通じて広告なしで送信されます。