カスタムWordPressテーマを簡単に作成する方法(コードなし)

最初からカスタムのWordPressテーマを作成しますか?


以前は、カスタムWordPressテーマを作成するには、WordPress codexに準拠し、適切なコーディング知識を持っている必要がありました。しかし、新しいWordPressテーマジェネレーターのおかげで、誰もが1時間以内に完全にカスタムのWordPressテーマを作成できるようになりました(コーディングの知識は必要ありません).

この記事では、コードを記述せずにカスタムWordPressテーマを簡単に作成する方法を紹介します.

コードを書かずにカスタムのWordPressテーマを作成する

初心者向けのカスタムWordPressテーマの作成

静的HTMLサイトとは異なり、WordPressテーマは、PHP、HTML、CSS、JavaScriptで記述されたテンプレートファイルのセットです。通常、これらのすべてのWebデザイン言語を適切に理解するか、カスタムWordPressテーマを作成するためにWeb開発者を雇う必要があります。.

開発者または代理店を雇った場合、カスタムのWordPressテーマのコストは数千ドルに達する可能性があります.

多くの中小企業経営者は、カスタムのWordPressテーマの高額な費用を賄うことができなかったため、多くの小規模ビジネスオーナーは、WordPressに付属するデフォルトのテーマをそのまま使用しました。.

解決したくなく、カスタマイズを望んでいた人は、ドラッグを使用しました & WordPressページビルダーをドロップするか、テーマフレームワークを使用してカスタムテーマを構築した.

WordPressテーマフレームワークはWordPressテーマの構築を容易にしましたが、それらは開発者向けのソリューションであり、平均的なWebサイト所有者ではありません.

一方、WordPressページビルダープラグインにより、ドラッグを使用してカスタムページレイアウトを非常に簡単に作成できました & ドロップインターフェイスですが、レイアウトのみに制限されていました。それを使ってカスタムテーマを作成できなかった.

Beaver Builderまで、最高のWordPressページビルダープラグインの1つが、Beaver Themerと呼ばれるアドオンでこの問題を解決することを決定しました.

Beaver Builder最高のWordPressページビルダープラグイン

Beaver Themerは、サイトビルダーのアドオンであり、ドラッグアンドドロップインターフェイスを使用して、コードの学習なしでカスタムテーマのレイアウトを作成できます。.

Beaver Themerを使用してWordPressテーマを簡単に作成する方法を見てみましょう.

ビデオチュートリアル

WPBeginnerを購読

ビデオが気に入らない、またはさらに説明が必要な場合は、読み続けてください.

カスタムテーマを構築するためのBeaver Themerの設定

Beaver ThemerはBeaver Builderのアドオンプラグインなので、この記事では両方のプラグインが必要です。.

まず、Beaver BuilderプラグインとBeaver Themerプラグインをインストールしてアクティブ化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

Beaver Themerを使用すると、カスタムテーマを作成できますが、最初はテーマが必要です。スターターテーマとして機能する全幅のページテンプレートを含む軽量テーマを使用することをお勧めします.

このようなテーマの多くは、WordPress.orgのテーマディレクトリにあります。最新のWordPressテーマには、全幅テンプレートが含まれています。私たちのトップピックは次のとおりです。

  • Astra – Beaver Builderのサポートが組み込まれた無料の軽量で多目的なWordPressテーマ.
  • OeanWP –フルページビルダーのサポートが付属する、もう1つの人気のある無料の多目的WordPressテーマ.
  • StudioPressテーマ–それらのテーマはすべてBeaver Builderと互換性があり、Beaver Themerとうまく機能します.

このチュートリアルでは、軽量でWordPressテーマを簡単にカスタマイズできるAstraを使用します.

Beaver Themerのテーマの設定

Beaver Themerを使用してカスタムWordPressテーマを作成する場合、Beaver Themerがページ全体(端から端まで)にアクセスできることを確認することが重要です.

これがデフォルトのAstraレイアウトです。ご覧のとおり、このレイアウトにはサイドバーが含まれているため、Beaver Themerを使用する場合は操作が難しい場合があります.

サイドバー付きのデフォルトのテーマレイアウト

あなたはあなたのウェブサイトの管理パネルにアクセスし、次に移動することでそれを変更することができます 外観»カスタマイズ ページ。ここから、に切り替える必要があります レイアウト»サイドバー タブ.

テーマのサイドバーをオフにする

そこに移動したら、デフォルトのレイアウトオプションの下にある[サイドバーなし]を選択し、[公開]ボタンをクリックして変更を保存します.

サイドバーのないレイアウトの使用がテーマで開始されます。これはBeaver Themerで使用するのに最適なレイアウトです.

サイドバーのないテーマのレイアウト

このページ全体のレイアウトにより、Beaver Themerは画面の隅々まで使用できるため、美しいエンドツーエンドのビジュアル体験を作成できます.

ほとんどのWordPressテーマには、全幅ページ用のテンプレートファイルが含まれています。他のテーマを使用している場合は、テーマ設定でサイドバーを削除するオプションを見つけることができます.

それが見つからない場合は、テーマ開発者に連絡してください。そうすれば、彼らがあなたを助けることができるかもしれません。.

テーマを全幅レイアウトに設定したら、Beaver Themerを使用してカスタムのWordPressテーマを作成する準備が整います.

クイックビーバーThemerの基礎

Beaver ThemerはBeaver Builderの上で動作します。ページビルダープラグインとして、Beaver Builderでは、アイテムをページにドラッグアンドドロップしてカスタムレイアウトを作成できます.

レイアウトで使用できる次のアイテムがあります。

  • テンプレート:列の行のコレクション、およびページレイアウト全体を構成するモジュール.
  • 列:コンテンツを水平方向に配置するのに役立つ垂直レイアウトモジュール.
  • 行:複数のモジュールの水平方向のコレクション
  • モジュール:タイトル、テキストブロック、テーブル、ギャラリーなどの特定の情報を出力するアイテム.

Beaver Builderでページを編集し、右上隅にある追加ボタンをクリックするだけです。次に、列、行、モジュールをページにドラッグアンドドロップして、すぐに編集を開始できます.

Beaver Builderの使用

ゼロから始めたくない場合は、あらかじめ用意されているテンプレートのリストから選択して、.

Beaver Builderテンプレート

Beaver Builderでは、レイアウトを保存して、後でテンプレートとして使用することもできます.

詳細については、Beaver Builderを使用してカスタムページレイアウトを作成する方法に関する記事を参照してください.

ただし、ページレイアウトを作成するだけではありません。完全なカスタムテーマを作成したい.

これはビーバー・テマーが入ったときです.

「Themer Layout」と呼ばれる別の項目をビーバービルダーに追加します.

Themerレイアウト

Themerレイアウトを使用すると、ヘッダー、フッター、コンテンツ領域、404ページ、およびその他のテンプレートパーツのカスタムレイアウトを作成できます.

これらはすべてのWordPressテーマの構成要素であり、それらを使用することで、ニーズに合ったカスタムテーマを作成できます.

Beaver Themerテンプレートを使用してカスタムWordPressテーマを作成する

次の手順では、最も人気のあるカスタムテーマ要素を構築するために必要な手順について説明します。完了すると、ベーステーマが完全にカスタムのWordPress子テーマに完全に変換されます。.

テーマのカスタムヘッダーを作成する

ウェブサイトのヘッダー領域から始めましょう。カスタムヘッダーはテーマの必須コンポーネントであり、従来の方法を使用してヘッダーを作成するのは難しい場合があります.

幸いなことに、Beaver Themerにはヘッダー機能が組み込まれています。事前に作成されたテンプレートを使用するか、2列のレイアウトでメニューと画像モジュールを使用できます。.

このヘッダー領域にアクセスするには、まず、Beaver Themerでヘッダーレイアウトを設定する必要があります。訪問 ビーバービルダー»新規追加 ページとヘッダーのタイトルを入力します.

カスタムヘッダーレイアウトの作成

その後、タイプとして「Themer Layout」を選択し、レイアウトオプションとして「Header」を選択します。完了したら、[Themerレイアウトの追加]ボタンをクリックして続行します.

これにより、レイアウト設定ページが表示されます。ここから、ヘッダーテンプレートが表示される場所として「サイト全体」を選択する必要があります.

レイアウト設定

次に、「Launch Beaver Builder」ボタンをクリックしてビルダーインターフェイスを開きます.

Beaver Builderは、基本的な1列と2行のヘッダーレイアウトを開始点として起動します.

ヘッダーのレイアウト

同じビーバービルダーのドラッグアンドドロップツールを使用して、背景、色、テキストなどを変更できます。右上の追加ボタンをクリックして、他のモジュールを追加したり、既製のテンプレートを読み込んだり、行/列を追加したりすることもできます。コーナー.

デザインに満足したら、[完了]ボタンをクリックしてレイアウトを保存または公開します.

これで、Webサイトにアクセスして、カスタムテーマヘッダーの動作を確認できます。ご覧のとおり、ヘッダーレイアウトをカスタムテーマに適用しました.

カスタムテーマのカスタムヘッダー

ヘッダーを除いて、コンテンツはまだ表示されず、ベーステーマのフッター領域が表示される可能性があります.

これを変えましょう.

テーマのカスタムフッターを作成する

カスタムヘッダーを作成したのと同じように、Beaver Themerを使用してテーマのカスタムフッターを作成できます。.

に向かう ビーバービルダー»新規追加 ページとフッターレイアウトのタイトルを提供します。次に、タイプとして「Themer Layout」を選択し、レイアウトオプションとして「Footer」を選択します.

フッターのレイアウト

[Themerレイアウトの追加]ボタンをクリックして続行します.

これにより、レイアウト設定ページが表示されます。ここから、テンプレートが表示される場所として「サイト全体」を選択する必要があります.

フッターのレイアウト設定

その後、「Launch Beaver Builder」ボタンをクリックしてビルダーインターフェイスを開きます.

Beaver Builderは、3つの列を使用したフッターレイアウトで起動します。このレイアウトを開始点として使用して、編集を開始できます.

フッターのレイアウトを編集する

モジュール、テキストブロック、またはその他の必要なものを追加できます。色、フォント、背景画像などをいつでも変更できます.

デザインに満足したら、[完了]ボタンをクリックしてレイアウトを保存または公開します.

投稿とページのコンテンツ領域を構築する

すべてのページのヘッダーとフッターを作成し、Webサイトに投稿したら、投稿またはページの本文(コンテンツ領域)を作成します。.

「新規追加」ページに「単数形」レイアウトを追加して、ヘッダーとフッターを作成したのとほとんど同じ方法で開始します.

投稿とページレイアウトの作成

次に、このレイアウトを表示する場所を選択します。すべての単一の投稿とページに使用する単数を選択するか、投稿またはページのみを選択できます.

特異なレイアウト設定

その後、「Launch Beaver Builder」ボタンをクリックしてビルダーインターフェイスを開きます.

特異なレイアウトの編集

Beaver Builderは、投稿/ページのタイトルが上部にあるサンプルの単数レイアウトをロードし、その後にコンテンツ、作成者のバイオボックス、コメント領域が続きます.

ポイントしてクリックし、これらのアイテムを編集したり、必要に応じて新しいモジュール、列、行を追加したりできます.

レイアウトに満足したら、[完了]ボタンをクリックして変更を保存および公開します。.

Webサイトにアクセスして、実際の動作を確認できます.

コンテンツ付きのテーマレイアウト

カスタムテーマのアーカイブレイアウトの作成

カスタムテーマが形になり始めたので、Webサイトの他の部分のレイアウトの作成に進むことができます。アーカイブページは、WordPressがカテゴリ、タグ、作成者、月次アーカイブを表示する場所です.

カスタムテーマでアーカイブページのレイアウトを作成しましょう.

まずは ビーバービルダー»新規追加 ページとアーカイブレイアウトのタイトルの提供.

カスタムテーマのアーカイブレイアウトを作成する

その後、タイプとして「Themer Layout」を選択し、レイアウトオプションとして「Archive」を選択します。 [Themerレイアウトの追加]ボタンをクリックして続行します.

これにより、レイアウト設定ページが表示されます。ここから、テンプレートが表示される場所として「すべてのアーカイブ」を選択する必要があります。日付、検索結果、カテゴリ、タグなど、アーカイブタイプごとに個別のレイアウトを作成することもできます.

アーカイブレイアウト設定

その後、「Launch Beaver Builder」ボタンをクリックしてビルダーインターフェイスを開きます.

Beaver Builderは、基本的な単一列のアーカイブレイアウトで起動します。アーカイブタイトルが上部に表示され、その後に投稿が続きます.

テーマのアーカイブレイアウトの編集

アイテムをポイントしてクリックすると、そのプロパティを編集できます。必要に応じて、新しいモジュール、行、列を追加することもできます.

その後、「完了」ボタンをクリックして変更を保存し、公開します。.

カスタムWordPressテーマの他のレイアウトの作成

Beaver Themerでは、テンプレート階層内の他のページ(404ページ、テンプレートパーツ、検索結果ページなど)のレイアウトを作成することもできます.

Beaver Builderの組み込みのドラッグアンドドロップ機能を使用すると、コードを記述することなく、独自のカスタムWordPressテーマを最初から簡単に作成できます。これは、実に最も初心者にやさしいWordPressテーマ開発方法です。.

この記事が、コーディングを学ばずにカスタムのWordPressテーマを作成する方法を学べたと思います。 SEOとユーザーエクスペリエンスを向上させるためにWordPressウェブサイトを高速化する方法に関するガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me