5つのコードフリーステップでカスタムWordPressテーマを作成する方法

あなたのウェブサイトのためにカスタムのWordPressテーマを作成したいですか？

独自のWordPressテーマを最初から作成するには、複雑なコードを記述したり、テーマ開発者を雇ってテーマを作成したりする必要がありました。 しかし、新しくて使いやすいWordPressテーマジェネレーターのおかげで、誰でもコードを書かなくてもカスタムWordPressテーマを作成できます。

この記事では、WordPressでカスタムテーマを作成する方法を段階的に説明します。

WordPressのテーマとは何ですか？

WordPressのテーマは、PHP、HTML、CSS、およびJavaScriptで記述されたテンプレートファイルです。 各ファイルは連携して、WordPressサイトのデザインと機能を作成します。

典型的なWordPressテーマには、すべてではないにしても、次のテーマファイルの一部が含まれます。

• footer.php
• header.php
• index.php
• page.php
• sidebar.php
• archive.php

WordPressのテーマには、functions.phpファイルとstyle.cssファイルも含まれています。

通常、カスタムWordPressテーマを作成するには、いくつかのWebデザイン言語またはWeb開発者をしっかりと理解している必要があります。

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

開発者またはWeb開発代理店を雇う場合、カスタムテーマを最初から作成するコストは数千ドルになる可能性があります。 多くの中小企業はコストを支払う余裕がないため、プラットフォームに付属しているデフォルトのWordPressテーマを採用しています。

ただし、デフォルトで解決したくないWebサイトの所有者の場合は、たとえばStudioPressのGenesisなどのテーマフレームワークを使用するか、WordPressページビルダープラグインを使用してWordPressサイトのカスタムテーマを作成できます。

WordPressテーマフレームワークは、多くのデザインと機能を自動的に処理することで、WordPressテーマの構築を容易にします。 ただし、それらはまだやや複雑なソリューションであり、たとえば子テーマが必要なため、平均的なWebサイト所有者よりも開発者に適しています。

反対に、WordPressページビルダーを使用すると、ドラッグアンドドロップインターフェイスを使用してカスタムページレイアウトを非常に簡単に作成できますが、制限もあります。 ページビルダーではレイアウトの作成のみが可能であり、通常、それらを使用してカスタムテーマを作成することはできません。

SeedProdまで、カスタムテーマに最適なWordPress Webサイトビルダーは、WordPressテーマビルダーでこの問題を解決することを決定しました。

SeedProdテーマビルダーとは何ですか？

SeedProdは、すでに100万人を超えるWebサイト所有者が使用している強力なドラッグアンドドロップページビルダーです。 しかし、そのテーマビルダーを使用すると、技術者以外のユーザーは、コードなしで完全にカスタムのWordPressテーマを作成できます。

wp-contentファイルを操作する代わりに、数回クリックするだけでテーマを最初から作成できます。 SeedProdはスタイルシートを自動的に作成します。

SeedProdには次のものが付属しています。

• 視覚的なドラッグアンドドロップインターフェイス
• 150以上のProテンプレート
• 200万枚のストックフォト
• WooCommerceのサポート
• サブスクライバー管理ダッシュボード
• Eメールマーケティングの統合

また、WordPressを使用してカスタムWebサイトをすばやく構築するには、非常に多くの追加機能とウィジェットが必要です。

そのことを念頭に置いて、SeedProdを使用して1行のコードを記述せずにカスタムWordPressテーマを作成する方法を見てみましょう。

コードなしでカスタムWordPressテーマを作成する方法

SeedProdを使用してカスタムWordPressテーマを作成するには、まずWordPressWebサイトでSeedProdプラグインをインストールする必要があります。 WordPressをまだインストールしていない場合は、次の手順に従ってWordPressWebサイトを作成する方法を学ぶことができます。

Webサイトにも簡単なWordPressテーマがインストールされている必要があります。 あなたはWordPressテーマディレクトリで多くの無料の解決策を見つけることができます。 カスタマイズを公開するとSeedProdがテーマを上書きするため、テーマがどのように表示されるかを心配する必要はありません。

また、WordPressテーマを変更するときは、誤ってWebサイトを壊さないように、開発環境を使用することをお勧めします。 BlueHostのような人気のあるWordPressホスティング会社は、デフォルトでテスト環境を提供しています。

また、重要な変更を加える前にWebサイトをバックアップする必要があります。 これがあなたが使うことができる最高のWordPressバックアッププラグインのリストです。

WordPressサイトの準備ができたら、以下の手順に従って、コードなしでカスタムWordPressテーマを作成します。

手順1.SeedProdをインストールしてアクティブ化する

最初のステップは、SeedProdWebサイトビルダープラグインをインストールしてアクティブ化することです。 テーマビルダー機能にアクセスするには、SeedProdProまたはEliteライセンスが必要です。

SeedProdプラグインのzipファイルをコンピューターにダウンロードした後、WordPressダッシュボードにアップロード、インストール、アクティブ化します。 この手順についてサポートが必要な場合は、WordPressプラグインのインストールに関するこのガイドに従ってください。

SeedProdをインストールした後、WordPress管理エリアからSeedProd≫設定に移動し、SeedProdライセンスキーを入力します。

SeedProdアカウント領域にアクセスし、[ダウンロード]タブからコピーすると、ライセンスキーを見つけることができます。

これで、 SeedProd≫テーマビルダーに移動して、テーマビルダーの概要を確認できます。 ここで、WordPressテーマのテンプレート階層を作成できます。

つまり、次のように、テーマを構成するすべての個別のパーツを作成できる場所です。

• ヘッダ
• フッター
• シングルポスト
• シングルページ
• アーカイブ（ブログページ）
• ホームページ
• サイドバー

[新しいテーマテンプレートの追加]ボタンをクリックすると、これらの各テーマパーツを個別に作成できます。

しかし、それが最初の試みにはあまりにも圧倒的に聞こえる場合は、テーマを作成する別の方法があります。

SeedProdの事前に作成されたテーマテンプレートを使用して、テーマの基本的なフレームワークをすばやく作成し、コードなしでデザインのニーズに合わせてカスタマイズできます。 このソリューションは初心者にとって非常に簡単なので、このチュートリアルではそれを重視します。

注： SeedProdは、カスタムランディングページの作成に役立つレスポンシブランディングページテンプレートも何百も提供しています。

ステップ2.テーマテンプレートを選択する

SeedProdのテーマビルダーには、すでにいくつかのテーマが作成されています。 それらを見つけるには、[テーマ]ボタンをクリックします。

このガイドの執筆時点では、次の9つのテーマテンプレートがあります。

1. スターターテーマ
2. 現代のビジネス
3. マーケティングエージェンシー
4. プロダクトデザインのテーマ
5. ペットケア会社
6. デジタル戦略のテーマ
7. ライブミュージックのテーマ
8. 住宅ローンブローカーのテーマ
9. レストランのテーマ

Webサイトのテーマテンプレートを選択するには、サムネイルの上にマウスを置き、チェックマークアイコンをクリックします。 このガイドでは、SeedProdスターターテーマを使用します。

テンプレートを選択すると、SeedProdはテーマを構成するすべてのパーツを自動的に作成します。

Webサイトに表示したくない特定の機能がある場合は、[公開]見出しの下にあるトグルをクリックして、そのテーマの部分をオフにすることができます。

各テンプレートパーツの条件リンクをクリックすると、その名前、タイプ、優先度を変更し、Webサイトに表示するタイミングと場所を選択できます。

ステップ3.WordPressテーマパーツをカスタマイズする

テーマの基本的な構成要素が整ったら、今度は各テーマセクションの編集を開始して、サイト用の真にカスタムなWordPressテーマを作成します。

テーマセクションを編集するには、そのセクションにカーソルを合わせて[デザインの編集]リンクをクリックします。

ヘッダーを編集することから始めます。

ヘッダーとフッター

SeedProdでテーマセクションを編集すると、視覚的なドラッグアンドドロップビルダーに移動します。 この画面でテーマのヘッダーをカスタマイズするには、ポイントしてクリックするだけです。

ご覧のとおり、スターターテーマには、ロゴとナビゲーションメニューを備えた2列のヘッダーが付属しています。 ライブプレビューのロゴをクリックして、カスタムロゴを表示するようにカスタマイズできます。

そこから、左側のパネルのプレースホルダーロゴを削除し、コンピューターまたはWordPressメディアライブラリから新しいロゴをアップロードできます。

同じパネルでロゴのサイズと配置を調整し、メインのWebサイトのURLなどのカスタムリンクを追加できます。

ヘッダーの背景色を変更する場合は、紫色のアウトラインが表示されるまでヘッダーセクションにカーソルを合わせ、クリックして左側のパネルにセクション設定を表示します。 そこから、ヘッダーにカスタムの背景色、画像を指定し、ヘッダーの幅を選択できます。

また、[詳細設定]タブでは、ヘッダーの影、間隔、境界線などをカスタマイズできます。

カスタムWordPressヘッダーに満足したら、右上隅にある[保存]ボタンをクリックして、テーマビルダーに戻ります。

これらの手順を繰り返して、WordPressフッターを編集します。 [デザインの編集]をクリックしてビジュアルエディターで開き、任意の要素をクリックしてコンテンツ、色、リンクなどをカスタマイズします。

ホームページ

次に、WordPressサイトのホームページをカスタマイズします。これは、ユーザーがWebサイトにアクセスしたときに最初に表示されるページです。 したがって、ビジュアルエディタで[ホームページ]セクションを開きます。

ヘッダーとフッターのデザインはすでにカスタマイズされているため、ホームページの上部と下部に新しいデザインが表示されます。 ただし、心配しないでください。この画面で行った変更は、ヘッダーやフッターには影響しません。 それらは単に視覚的なガイドとしてそこにあります。

SeedProdのスターターテーマテンプレートには、次のようなほとんどのビジネスWebサイトに必要なすべての機能があります。

• ヒーローエリア
• クライアントのロゴ
• 特徴
• お客様の声
• FAQセクション

ヘッダーと同じように、インチごとにカスタマイズして一意にすることができます。 ヒーローエリアを変更することから始めましょう。

ヒーローエリアには次の機能があります。

• セクション
• 2列レイアウト
• 画像
• 見出し
• 文章
• ボタン

デフォルトの画像を変更するには、ロゴの場合と同じように、画像をクリックして新しい画像をアップロードするだけです。

各ブロックをクリックしてコンテンツをカスタムテキストに置き換えることで、見出しと説明を編集することもできます。

ボタンブロックをクリックすると、ボタンのテキスト、リンク、配置などを変更できます。

これらの要素はすべて、左側のブロックパネルにあります。 そうすれば、ブロックを左からドラッグしてデザインにドロップし、テーマにコンテンツを追加できます。

それがあなたのビジネスを反映するまであなたのホームページの残りをカスタマイズするためにこのプロセスに従ってください。 たとえば、会社のサービスに関する情報を追加したり、機能セクションで製品の機能を強調したりできます。

次に、SeedProdの組み込みのお客様の声ブロックを使用して、既存のクライアントや顧客からの肯定的な社会的証明を追加できます。

また、セクション設定を開いて別の色を選択することにより、このセクションの背景色をテーマヘッダーに一致するように変更しました。

ホームページをカスタマイズした後、モバイルプレビューアイコンをクリックして、モバイルデバイスでのデザインの外観を確認できます。

何かが正しく表示されない場合は、モバイル画面が優れたユーザーエクスペリエンスを提供するまで、物事を移動できます。

ホームページの外観に満足したら、[保存]ボタンをクリックして、テーマビルダーに戻ります。

ブログページ、単一の投稿、およびページ

新しいWordPressテーマにブログ投稿用のカスタムページを含めたいと思うかもしれません。 幸いなことに、SeedProdには、その目的のために特別にカスタマイズできるテーマ部分があります。

そのセクションは、テーマビルダーではブログインデックス、アーカイブ、検索と呼ばれます。 ブログの投稿ページ、投稿のアーカイブ、検索結果ページを、Webサイトの他のブランドと一致するように調整できます。

したがって、[デザインの編集]リンクをクリックして、ドラッグアンドドロップビルダーでこのテーマパーツを開きます。

このページでは、スターターテーマはテンプレートタグを使用して、アーカイブのタイトルや投稿など、WordPressから動的な情報を取得します。 これらのブロックのいずれかをクリックすると、左側のパネルにそれらの設定が表示されます。

たとえば、[投稿]テンプレートタグをクリックすると、デフォルトで投稿、カスタム（投稿、メディア、またはカスタム投稿）、または特定のクエリパラメータを入力して手動で投稿を表示できます。

列数、ページあたりの投稿数、注目の画像の表示と非表示、抜粋の表示などを選択することもできます。

アーカイブまたはブログページをカスタマイズした後、テーマビルダーに戻り、[単一投稿]セクションを編集します。

このテーマパートでは、次のテンプレートタグを使用して、個々のWordPress投稿に関する情報を取得します。

• 記事のタイトル
• 投稿情報
• コンテンツを投稿する
• 著者ボックス
• コメントを投稿
• 投稿ナビゲーション

これらの各ブロックは、他のSeedProdブロックと同じように編集できます。 任意の要素をクリックして、設定パネルでカスタマイズするだけです。

たとえば、[投稿情報]ブロックをクリックすると、メタ情報を追加したり、配置を変更したり、アイコンの色を調整したりできます。

サイドバー

多くのWordPressWebサイトは、ソーシャルメディアプロファイル、最新の投稿、ニュースレターのサインアップボックスなど、訪問者に重要な情報を表示するためにサイドバーを使用しています。 ただし、多くの既成のWordPressテーマとは異なり、SeedProdを使用して、視覚的な構成要素を備えたカスタムのWordPressサイドバーを作成できます。

これを行うには、サイドバーテンプレートパーツの[デザインの編集]をクリックします。 そこから、好きなコンテンツをサイドバーのデザインにドラッグアンドドロップできます。

スターターテーマには、デフォルトで検索ボックス、ソーシャルメディアアイコン、投稿カテゴリが含まれています。 ただし、ここに好きなものを追加できます。 たとえば、最近のブログ投稿のリストやアフィリエイトパートナーにリンクしている画像を表示したい場合があります。

SeedProdのオプトインフォームブロックを使用してメールアドレスを収集し、サイドバーでリストを拡大することもできます。 最良のことは、それを実現するために技術的な知識は必要ないということです。

グローバルCSS

これで、コードなしでカスタムWordPressテーマのほとんどを構築できました。 ただし、テーマ全体ですべてが一貫していることを確認するために確認する必要のある部分がもう1つあります。

これがグローバルCSSであり、テーマのグローバルスタイル、タイポグラフィ、色、およびレイアウトを制御します。 そのため、そのテーマパーツの[デザインの編集]をクリックして、ページエディタで開きます。

ご覧のとおり、このページでは、テーマの多くのスタイルを制御できます。 左側のパネルには、次のセクションがあります。

• 色
• フォント
• バックグラウンド
• ボタン
• フォーム
• レイアウト
• カスタムCSS

たとえば、[ボタン]セクションを開いて、カスタムカラーを選択できます。 次に、その色がテーマのすべてのボタンに表示されます。

フォントの見出しでも同じことを行い、テーマのすべてのリンクにカスタムカラーを割り当てることができます。

したがって、テーマが希望どおりに表示されるまでこれらの設定を微調整してから、[保存]ボタンをクリックして変更を保存します。

ステップ4.Eメールマーケティングサービスを接続する

あなたのビジネス目標の1つがあなたの電子メールリストを増やすことであるならば、あなたはあなたのWordPressテーマデザインのどこかにサインアップフォームを追加した可能性があります。 ただし、新しい連絡先をリストに自動的に追加するには、フォームをメールマーケティングサービスに接続する必要があります。

SeedProdは、Constant Contact、Mailchimp、Dripなどの多くの一般的なEメールマーケティングサービスと直接統合されています。アカウントにリンクするのは簡単です。

テーマパーツを編集して、画面上部の[接続]タブをクリックするだけです。

次に、リストから統合をクリックして、画面の指示に従います。 その結果、あなたのオプチンフォームに記入した人は誰でもあなたの電子メールリストに自動的に追加されます。

ステップ5.カスタムWordPressテーマを有効にする

SeedProdを使用してカスタムWordPressテーマを作成する最後のステップは、テーマをWebサイトで公開することです。 これを行うには、右上隅にある[SeedProdテーマの有効化]見出しを見つけて、トグルを「オン」の位置に切り替えます。

新しいテーマはデフォルトのテーマを上書きし、Webサイトのフロントエンドでカスタマイズを確認できるようにします。

それでおしまい！ 新しいカスタムWordPressテーマはあなたのウェブサイトで公開されています。 それがどのように見えるか見てみましょう。

新しいヘッダーとフッターを含むホームページは次のとおりです。

カスタムWordPressサイドバーのあるブログページは次のとおりです。

おめでとう！

これで、コードなしでカスタムWordPressテーマを作成する方法をマスターしました。

SeedProdの簡単で強力なWordPressテーマビルダーを使用すると、カスタムWordPressテーマを作成するために、技術的な経験、WordPress開発者、または莫大な予算は必要ありません。

プラグインをインストールした瞬間に、パワーと機能がすぐに利用できます。

何を求めている？

読んでくれてありがとう。 ビジネスを成長させるためのより役立つコンテンツについては、YouTube、Twitter、Facebookでフォローしてください。