WordPress初心者：中レベルのカスタマイズ

前回のWordPress初心者ブログの単純な基本を超えるために、過去2週間にわたって、ProteusThemesデモページの1つを再作成するために取り組んできました。 具体的には、自動テーマのデモ。 以前と同じように、同僚は私を段階的なタスクに設定して、私を途中で設定しました。 これらは私がこれまでに学んだ最も重要な教訓です。

アイコンボックス

アイコンボックスウィジェットは、非常に便利な視覚言語です。 当たり前のように思えるかもしれませんが、電話アイコンの横に会社の電話番号を表示することは、サイトのユーザーエクスペリエンスを向上させるためのシンプルで効果的な方法です。

私の仕事は、ホームページのヘッダーにアイコンボックスを追加することでした。 これを行うには、ダッシュボードで[外観]-> [ウィジェット]に移動し、[テーマサイドバー]内で[ヘッダー]を選択する必要があります。

「ヘッダー」を見つけたら、画面の左側に注意を向けます。ここに「使用可能なウィジェット」のリストが表示されます。 ProteusThemes：IconBoxはあなたが探しているウィジェットです。

これで、 2つのオプションがあります。 ウィジェットを画面の右側にドラッグアンドドロップしてヘッダーに配置するか、ウィジェットをクリックすると、該当する場所のドロップダウンメニューが表示されます。この中から[ヘッダー]を選択するだけです。リストして青い「ウィジェットの追加」ボタンをクリックします。

これで、ウィジェット内から選択できるアイコンがたくさんあることがわかります。この演習では、電話を選択しました。 アイコンボックスにタイトルを付けて、その横に表示する情報を決定するだけです。

ウィジェットメニューのすべてのアイコンの下に、「このウィジェットを強調表示する」オプションが表示されます。 アイコンボックスの情報が非常に重要で、もっと目立たせたい場合は、そのボックスにチェックマークを付けます。

フロントページスライダー

自動デモを再作成するには、ホームページの機能としてスライダーを追加する必要がありました。 これを行うには、[ページ] -> [すべてのページ]-> [ホーム]を選択します。 ホームページのエディターに移動したら、画面の右側にある[ページ属性]ドロップダウンメニューを見つける必要があります。 それを見つけて、「テンプレート」を「スライダー付きフロントページ」に変更します。

「スライダー付きフロントページ」に変更すると、画面の下部に「フロントページスライダー」というタイトルの新しいメタが表示されます。ここをクリックして、画像とテキストをスライダーに追加してください。

ショートコード

フロントページのスライダーを再作成すると、ショートコードがうまく表示されます。 どうして？ 自動デモでは再作成しているので、スライダー内にボタンがあります。

この時点で、推奨プラグインを実際にインストールする必要があることを強調することが重要です。 私が犯した間違いは、 ProteusThemes Shortcodesプラグインをアクティブにせずに、「スライドテキスト」にショートコードを挿入することでした。 プラグインをアクティブにしていない場合は、作成しようとしているボタンではなく、コード自体がスライダーに表示されます。

すべてのテーマのドキュメントには「ショートコード」セクションがあり、挿入できるボタンのスタイルと機能について多くの利用可能なオプションが用意されています。 このコードをコピーして、スライダーの「スライドテキスト」セクションに貼り付けるだけです。 コード内のボタンのテキストをニーズに合わせて編集するだけで、すぐに使用できます。

もちろん、スライダー以外の場所でもショートコードを使用できます。 たとえば、何かを試して販売するためのコンテンツマーケティングを作成した場合は、ショートコードを使用して、ブログ投稿の下部に効果的なCTAボタンを作成します。

ページビルダー

自動デモを再現するには、 SiteOriginのPageBuilderプラグインを理解することが非常に重要でした。 私がそれを使用しなければならなかった最初のタスクは、ホームページのヘッダーの下にポップオーバーセクションを備えたこのIconBoxを作成することでした：

これを行うには、編集するページ（私の場合はホームページ）に移動します。 次に、ページビルダーメニューを見つける必要があります。次のようになります。

ここから、「行の追加」を選択します。 次に、この行内の列に関連するオプションが表示されます。 必要な列の数、サイズの比率、および左から右、またはその逆のサイズ順に列を選択できます。 IconBox Popoverには、同じサイズの3列を選択しました。

列の準備ができたので、ウィジェットを追加して列に機能を追加し始めることができます。 これを行うには、追加する列をクリックします。列を選択したら、上のメニューから[ウィジェットの追加]ボタンをクリックします。

選択したウィジェットに応じて、列に機能を追加できます。 たとえば、私の「OpeningTimes」IconBox Popoverでは、IconBox Popover内にProteusThemes Opening Timeウィジェットを追加して、列がクリックされた場合に関連情報がポップオーバーに表示されるようにする必要がありました。

IconBoxポップオーバーのこの行を作成した後に私が抱えていた問題の1つは、行が自動デモと同じ色ではなく、ページの全幅に拡張されていないことでした。 このような問題は簡単に解決できます。 まず、行の上にある小さなレンチアイコンにカーソルを合わせて、 [行の編集]を選択します。 色を変更するには、次のステップは「行スタイル」メニューから「デザイン」を選択することです。ここで、色やその他のデザインオプションを変更できます。

行のサイズを変更するには、最初に[行スタイル]メニューから[レイアウト]を選択します。 これにより、行にパディングを追加するオプションが提供されます。 次に、行をページの全幅に拡張する場合は、[行レイアウト]ドロップダウンを選択し、[全幅]を選択します。

私はこれらの注目のページ列を作成するためにまったく同じ方法でページビルダーを使用しました：

これを行うには、Iconbox with Popoverウィジェットを列に追加する代わりに、 ProteusThemes：FeaturedPageウィジェットを選択しました。 さまざまなウィジェットを列に配置して、ページビルダーがどれほど役立つかを実際に理解するために、よく遊んでおく必要があります。

今のところこれですべてです。 より基本的なヒントについては、以前の投稿をご覧ください。 以下をクリックしてニュースレターを購読し、この種のコンテンツを入手して、さらに多くのコンテンツを受信トレイに直接配信してください…

今すぐ購読する