WordPressテーマをカスタマイズする方法を知りたいですか？ Elementorプラグイン ?
WordPressテーマのカスタマイズは、WordPress Webサイトを構築する際の主要なタスクのXNUMXつです。 彼女はウェブサイトのデザインを管理しているため、多くの専門家がほとんどの時間を費やしています。
カスタムのWordPressテーマを作成するには、通常、テーマファイルとコードエディターを使用します。 レイアウトの変更はテンプレートファイルで行われ、デザインの変更はCSSを通じて行われます。 また、カスタマイズを表示するには常にブラウザーウィンドウを更新する必要があるため、多少面倒な場合があります。
幸いなことに、 Elementor、 このプロセスは非常に簡単になるので、チェックしてみてください。
しかし、前に、一緒に発見しましょう WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法.
それから、私たちがここにいる理由に戻りましょう。
WordPressテーマとは
WordPressテーマは、本質的には、WordPress Webサイトの外観を定義するテンプレートのコレクションです。
WordPressテーマには、ヘッダーやフッターから配色、レイアウトなど、ウェブサイトのデザインに影響を与えるすべてのものが含まれます。
無料とプレミアムの両方で利用可能なテーマがたくさんあり、次のようなほとんどすべての業界に適合します 写真のウェブサイト, ジムクラブのウェブサイト, 美容院のウェブサイト, 法律のウェブサイトそして、もっと。
WordPressテーマをカスタマイズする理由
Web サイトを作成する主な理由の XNUMX つは、ビジネスを宣伝することです。 それを行うよりも良い方法は何ですか ウェブサイトを作成する 会社のスタイルとデザインを促進するユニーク。
Amazon、eBay、Googleが独自のデザインを持たない存在であることを想像できますか？
もちろん、そうではありません。それが、WordPressテーマをカスタマイズしたい理由のXNUMXつです。 私たちはそれをユニークにし、会社のメッセージに適応させたいと思っています。
また、時々、またはむしろ、しばしば、貧弱なデザイン、うまくいかない色、または重すぎてサイトのパフォーマンスにのみ影響を与えるテーマに悩まされているWordPressテーマを実行します。ウェブ。 WordPressテーマは、面倒なことを除いて強力なものになる可能性があります。 それをカスタマイズしてこれを変更すると、すべての問題を解決して作成できます より良いユーザー体験.
WordPressテーマをカスタマイズする方法
WordPressテーマをカスタマイズする方法はいくつかあります。
- WordPressカスタマイザを介して手動で
- コード付き
- Elementorを使用
WordPressテーマを手動でカスタマイズする方法
組み込みの WordPress カスタマイザーを使用して、選択した WordPress テーマをカスタマイズできます。 コードなしで行うと、多くの場合、変更できるものが制限されます。 いくつか WordPressテーマ プレミアムでは、より多くのカスタマイズ オプションを利用できますが、本質的に多くのデザイン オプションはありません。
この領域をさらに詳しく説明する前に、既存のWordPressテーマをカスタマイズするときは、 親テーマではなく子テーマ.
WordPress子テーマ
子テーマは、別のWordPressテーマである親テーマとまったく同じ機能と特徴を持つWordPressテーマです。 子テーマは、親テーマに影響を与えたり、更新する機能を失うことなく、テーマを安全にカスタマイズおよび変更するために使用されます。
WordPressテーマカスタマイザ
子テーマを使用するのが最善であることがわかったので、WordPressカスタマイザーでテーマをカスタマイズする方法を学びましょう。 アクセスするには、ダッシュボードに移動し、 apparence 左側で選択します パーソナライズ。
このカスタマイザで変更できる主な機能は次のとおりです。
ウェブサイトのタイトル、ロゴ、アイコンを追加する
タイトル、ロゴ、アイコンを追加または変更するには、WebサイトのIDパネルに移動します。 これらの各要素を選択して変更します。
WordPressテーマの色を変更する
いくつかの WordPressテーマ カラースキームを変更できますが、すべてではなく、通常は変更できます。 WordPressテーマ プレミアム。 WordPress テーマで配色を変更できる場合、カスタマイザーにアクセスするとこのオプションが表示されます。
ナビゲーションメニューを追加
カスタマイザーでは、Webサイトのナビゲーションメニューを簡単に追加および変更することもできます。
コードでWordPressテーマをカスタマイズする方法
[外観]タブで、テーマエディタを選択するオプションがあります。 それをクリックすると、テーマコードのウィンドウが表示されます。 このオプションはCSSコーディングを十分に理解している必要があり、初心者にはお勧めできません。
ここでは、次のようなファイルにアクセスできます style.css、functions.php、これはまさにあなたがあなたのウェブサイトを壊さないようにあなたが子テーマを必要とするシナリオです。
コーディングによってテーマをカスタマイズするもうXNUMXつの方法は、FTPソリューションを使用してファイルをアップロードすることです。 このプロセスには、ホスティングプロバイダーを介したFTP資格情報の作成、FTPソリューション（FileZillaなど）のダウンロードとインストール、アカウントへのログイン、ファイルの編集が含まれます。 FTPソリューション。
ガイドをご覧ください FileZillaでWordPressをインストールする方法
コーディングに慣れていない限り、このオプションはお勧めしません。
ElementorでWordPressテーマを簡単にカスタマイズ
これは、ユーザーインターフェイスから直接実行できます。 コードをXNUMX行変更したり、ブラウザウィンドウをリロードしたりする必要は一度もありません。
Elementorを使用すると、マウスを数回クリックするだけでWebサイトのすべての要素をすばやく簡単に変更でき、モバイルプラットフォーム用にこれらの機能を最適化することもできます。
Elementorは、動的コンテンツを使用してページをプレビューできるようにすることで、このプロセスをはるかに簡単にします。 これにより、デザインの変更が実際のWebサイトとコンテンツにどのように影響するかをすぐに確認できます。
ヘッダーとフッターをカスタマイズする
Elementorは、ヘッダーとフッターのデザインに関して、完全な柔軟性を提供します。 私たちは皆、WordPressテーマがあり、ヘッダーやフッターのデザインのXNUMXつの側面を変更できないことは、どれほど退屈であるかを知っています。 特別なテーマ、プラグインなどが必要です。
Elementorがあれば簡単です。
1.ヘッダーテンプレートを作成する
まず、新しいヘッダーテンプレートを構成します。 これを行うには、Elementor> MyTemplatesに移動します。
ここで開始するXNUMXつの方法は、上部にある[新規追加]ボタンをクリックすることです。 次の画面で、ドロップダウンメニューを使用して、デザインするテンプレートのタイプとして[ヘッダー]を選択します。
前の画面の[ヘッダー]タブをクリックし、表示される大きな緑色のボタンを押しても、この画面にアクセスできます。
テンプレートタイプとしてヘッダーを事前に選択します。 どちらの方法でも、テンプレートの適切な名前を追加して（後でそれが何であるかがわかるように）、[テンプレートの作成]をクリックして続行する必要があります。
ここに到着します。
Elementor Proでは、あらかじめ設計されたヘッダーブロックから選択できます。 これらは、独自のデザインの開始点として使用できるデザインテンプレートです。この場合は、これを行います。
ヘッダーブロックにカーソルを合わせると、 インセット すぐに設計を開始できます。 それ以外の場合は、最初に画像をクリックして、拡大版を表示します。 その後、いつでも押すことができます インセット 上記。
それ以外の場合、最初からやり直したい場合は、ウィンドウをクリックして閉じます。 X 右上隅にあります。
2.基本的なヘッダーデザインを変更する
新しいヘッダーを入力した後、最初に気付くのは、前に構成したロゴとメニューがすでにそこにあることです。
これがまさに私たちがそれらを組み合わせた理由であり、私たちはそれらをカスタマイズする方法について話します。 ただし、最初にヘッダーセクション自体をカスタマイズする方法を見てみましょう。
これを行うには、その上にカーソルを合わせて、上部の編集ボタンをクリックします。 これにより、左側に編集オプションのリストが開きます。
以下は、さまざまなメニューで制御できるものです。
- レイアウト -セクションの幅、列間のスペースのサイズ、高さ、垂直列とコンテンツの配置、割り当てられたHTMLタグと一般的な構造を制御します。
- 形式 -ここでは、背景色を変更できます ホバー効果でも 画像またはビデオを追加する 必要に応じて、オーバーレイ、境界線、仕切り効果を追加し、タイポグラフィの設定を変更します。
- 上級 -この部分では、マージン、Zインデックス、アニメーション、ID、クラスなどのCSS属性を追加できます。 また、セクションを固定して応答性の高い設定を制御し、いくつかを追加することもできます。 カスタムCSS.
上記はすべて一目瞭然で、必要なものがすぐに手に入ります。
3.ヘッダー要素をカスタマイズする
ただし、ヘッダーセクション全体を編集できるだけでなく、ヘッダーセクションに含まれているアイテムも編集できます。 たとえば、ウェブサイトのロゴをカスタマイズするには、それをクリックするだけです。 これも、左側に編集オプションを提供します。
ロゴの場合、これにより次のオプションが提供されます。
- コンテンツ -画像のサイズ、配置、リンク先を変更します。
- 形式 -幅と高さを制御し、CSS効果とホバー効果を追加し、必要に応じて境界線と影を含めます。
- 上級 -ここには、基本的にヘッダーセクションと同じオプションがあります。
設定を使用して、ヘッダーに適切に表示するようにロゴをカスタマイズします。 また、各アイテムには独自のタイプのオプションがあるため、必ずチェックしてください。
4.アイテムを追加する
もちろん、Elementorではヘッダーにアイテムを追加することもできます。 右上の記号をクリックするだけで、何が利用できるかを確認できます。
Elementorは、ヘッダーテンプレートを編集するときに、関連するブロックをリストの最上部に自動的に表示します。これは、状況下で最も意味のあることです。 この場合、これらはWebサイトのロゴ、ナビゲーションメニュー、Webサイトのタイトルなどです。
たとえば、ロゴの横にWebサイトのタイトルを追加する場合は、ロゴをドラッグアンドドロップするだけです。 ただし、現在選択しているヘッダーテンプレートでは、ロゴの上または下に追加できます。 しかし、それは簡単に解決される問題です。
このような場合は、ヘッダーにカーソルを合わせてプラス記号を使用します–+-上記のセクションを追加します。
XNUMX列のデザインを選択するには、紫色のボタンをクリックしてください。
次に、要素を既存のヘッダーセクションから新しいセクションにドラッグし、中央にWebサイトのタイトルを追加します。
しかし、待ってください、スタイルはまったく異なります！ 問題ない。 既存のヘッダーを右クリックして選択します コピー。 次に、新しいセクションを右クリックして、ここをクリックします スタイルを貼り付けます。 Elementorは既存のセクションのスタイルを適用します。これは後で閉じることができます。
Elementorに含まれている他のすべての要素を使用して、他のヘッダー要素を使用して同じプロセスを実行できます。
独自の投稿テンプレートをカスタマイズする
Elementorでは、単一の投稿テンプレートをカスタマイズすることもできます。 方法は次のとおりです。
1.新しいモデルを作成する
テンプレートの作成は通常の方法で機能します。 ただし、今回は 単発講座 モデルタイプとして。 次に、以下で、編集する固有のテンプレートを選択します。 この例では、 ポスト.
新しいページデザインを作成する場合は、404ページを編集するか（後で詳しく説明します）、または カスタム投稿タイプ 特に、他のものを選択します。 どちらの場合も、名前を入力して続行します。
次の画面では、通常どおり事前定義されたテンプレートから選択できます。 ただし、この場合は、最初から新しいモデルを作成します。 右上のXをクリックして、このウィンドウを閉じます。
2.プレビューを構成する
次に、プレビューウィンドウを既存の投稿に設定します。 これを行うには、エディターオプションの下部にある目のアイコンをクリックします。 設定を行います。
開いたメニューの プレビュー 動的コンテンツ、選択 公開。 その後、次の行で、既存の投稿を名前で検索して選択できます。
それが終わったら、 申し込む & プレビュー。 この時点では何も表示されません（ページには何もないため）が、Elementorに今後この投稿のデータを使用するように指示します。 これが何を意味するかすぐにわかります。
3.上記のセクションを作成しましょう
まず、上記のセクションを作成します。 ここには通常、投稿のタイトルや、作成者、日付、カテゴリなどのメタデータなどが表示されます。
最初のステップはサインをクリックすることです + そして、単一の列セクションを作成します。
その場合、レイアウトセクションで、その幅、高さ、配置、スタイルを制御するオプションがあります。 この場合、ここで行うことはあまりありません。 また、心配する必要はありません。いつでも戻って後で変更できます。
次に、投稿タイトルウィジェットを新しいセクションにドラッグします。
その際、使用可能なすべてのオプションを使用して、デザインとレイアウトを好みに合わせて調整してください。 たとえば、これを行うための私の設定は次のとおりです。
あなたが学ぶべきクールな機能もあります。 投稿タイトルのキー記号をクリックすると、動的データの前後に静的コンテンツを追加できます。
たとえば、ニュースやレシピなどの特定の投稿カテゴリのテンプレートを作成する場合、次のように投稿のタイトルに追加できます。
そうすれば、そのデータはそのカテゴリのすべての投稿に表示されます。 この時点ではこれを使用しませんが、これは重要な副次的な注意であると考えました。
投稿のタイトルの下に、 ポスト インフォ ウィジェット 投稿のメタデータを表示します。
ここに私が使用する設定があります：
さらに、デザインをページの残りの部分に合わせるために、スタイルオプションを使用しました。 同じことを確認してください。
4.ポスト本体をセットアップする
ヘッダーの後に、ページの本文を作成します。 このパーツのデザインをヘッダーとは異なるものにする場合は、新しいセクションを設定する必要があります。 しかし、私はそれをシンプルに保つので、そうする必要はありません。
最初に挿入したいのは、注目画像です。 このため、同じ名前のウィジェットをすでにページにあるものの下に配置できます。
基本的に設定は一切変更せず、そのままにしておきました。
次に、コンテンツを投稿します。 ここにも対応するブロックがあります。
注目の画像と投稿コンテンツの場合、Elementorは自動的にWebサイトにあるものを自動的にプルします。 活版印刷の設定で遊ぶなど、必要な新しいブロックのデザインを調整します。
それ以外はそれだけです。 最後の部分に進むことができるように、ここで行うにはそれほど多くの作業はありません。
5.フッターを構成する
この場合、フッターに著者のプロフィール、共有オプション、読者のコメントを表示します。 これを行うには、まず、66.33つの列を持つ新しいセクションを作成する必要があります。 著者プロファイル用にさらにスペースを作成するために、XNUMXレイアウトに設定できます。
その後、ウィジェットを配置します 著者ボックス 左側のセクションにあります。
必要に応じてスタイルをカスタマイズしてください。 背景色を少し追加して、タイポグラフィの設定を少し調整しました。
その後、右側に共有ボタンブロックを追加します。
上記のスクリーンショットで私の設定を確認できます。
その後、あとXNUMX列下にセクションを作成し、そこに[コメントを投稿]ウィジェットをドラッグアンドドロップするだけです。
（ちなみに、これらのウィジェットが見つからない場合は、検索機能を使用してください）。
必要と思われるコメントセクションを調整し（私はそのままにしました）、投稿する準備が整います。 これが完成したデザインです：
アーカイブテンプレートをカスタマイズする
1. WordPressアーカイブテンプレートを設定する
これで、新しいモデルを作成するためのソリューションをすでに理解しています。 唯一の違いは、この場合は選択することです Archive モデルタイプとして。
その後、いつものように、いくつかのブロックから選択するか、独自のモデルを最初から作成することもできます。 ただし、アーカイブの場合、おおよそXNUMXつしかありません。 ウィジェット とにかく重要なElementor。
2.アーカイブのタイトルを定義します
私が話したい最初のブロックはアーカイブのタイトルです アーカイブのタイトル.
以下の通常の設定に加えて スタイルと高度なの下にあるキー記号をクリックすると、重要なオプションを見つけることができます タイトル。
ここで、Elementorが[作成者：]と表示されている部分のようにページにアーカイブタイプを表示するかどうかを有効または無効にできます。 これは、下のボタンから発生します コンテキストを含める.
ちなみに、いつものように、プレビュー設定（[目の記号]> [設定]）を使用して、さまざまなアーカイブをプレビューできます。 このようにして、固有のカテゴリ、タグ、作成者などのデザインを確認できます。 それを覚えておいてください。
3.アーカイブパブリケーションブロックを使用する
アーカイブのXNUMX番目に重要なウィジェットはアーカイブ投稿です。 これにより、任意のアーカイブに属するすべての投稿がXNUMXつのページに表示されます。 テンプレートを選択すると、すでにそこにありますが、このブロックを使用して自分で簡単に追加することもできます。
アーカイブページをカスタマイズするためのオプションを見てみましょう。
- 肌 -投稿をクラシックまたはカードスタイルのデザインで表示することを選択します。
- コラム -投稿が表示される列の数を決定します。
- 画像を表示 -アーカイブページの注目画像をアクティブ化
- 石造建築 –組積造デザインのアイテムを表示するかどうか。
- 画像サイズ -Elementorがアーカイブページで使用する画像のサイズ。
- 役職 -投稿のタイトルを表示しますか？
- タイトルHTMLタグ -その場合、どのHTMLタグで囲む必要がありますか？
- 抜粋 -投稿からの抜粋を含めるか、タイトルのみを表示します。
- 抜粋の長さ -抽出の長さを決定します。
- -訪問者が利用できる投稿メタデータを定義します。
- 間のセパレータ -メタデータ情報間の区切り記号。
- 続きを読む -「続きを読む」リンクを含めますか、はいまたはいいえ？
- バッジ -投稿にカテゴリやタグなどの情報を追加できます。
- 分類バッジ -ここで、含める情報を決定できます。
- アバター –これにより、記事の著者のプロフィール写真を変更できます
上記に加えて、いくつかのオプションがあります。 下 ページング、 アーカイブページングの処理方法を定義できます。 たとえば、表示方法、含めるページ数、テキストの配置などです。
最後に、 高機能 訪問者が空のアーカイブにアクセスしたときに表示するメッセージを設定できます。 他のすべてはよく知っている必要があります。 選択したスキンによってスタイルオプションが変わることに注意してください。
4.アーカイブごとのパブリケーション数を制御する
アーカイブテンプレートに関する簡単なメモ。 アーカイブ（またはブログページ）に表示される投稿の数を変更するには、WordPressの下で変更する必要があります。 設定>読み取り。
ここでは、訪問者に表示する投稿の数を入力します。
パーソナライゼーション 簡単に ElementorによるWordPressテーマ
WordPressのテーマをカスタマイズすることは、多くの専門家の基本です。 これには通常、ファイルの多くのコーディングと編集が含まれますが、Elementorではこれは不要になりました。
上で見たように、プラグインは本格的なWordPressテーマエディターです。 それは、ユーザーインターフェイスからそのすべての部分をカスタマイズすることができます。 Webサイトのヘッダー、フッター、ページと投稿のテンプレート、アーカイブテンプレートなどを編集できます。
動的コンテンツを使用してWebサイトの任意の部分をプレビューする機能により、トレンディなカスタマイズをすべて実装できます
つまり、Elementorを使用すると、WordPressテーマを簡単にカスタマイズできます。 数十のファイルと数百のコード行を苦労して変更する代わりに、すべてをXNUMXか所ですばやく行うことができます。
Elementor Proを今すぐ入手！
まとめ
そこにそれがある ！ Page BuilderElementorを使用してWordPressテーマをカスタマイズする方法を示すこの記事は以上です。 そこへの行き方について懸念がある場合は、内でお知らせください commentaires.
ただし、相談することもできます 私たちのリソース、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログ作成 または Divi：史上最高のWordPressテーマ.
しかし、その間に、 さまざまなソーシャルネットワークでこの記事を共有する.
...
