初めてのWordPressサイト構築は、少し難しいかもしれません。何千ものテーマの中から、あなたのブランドに合ったものを見つけるのは大変です。
そこで役立つのが、あなたのすべての要件に合ったカスタムテーマを作成することです。
しかし、初心者にとって難しいのは、通常、コーディングの経験とWordPressに関する深い知識が必要になることです。
しかし、適切なWordPressテーマビルダーがあれば、ドラッグ＆ドロップビルダーを使って自分でテーマを作成できます。
この記事では、コーディング不要で、簡単な数ステップでカスタムテーマを作成する方法をご紹介します。
WordPressテーマとは？
まず、WordPressテーマが正確に何であり、何で構成されているのかを明確にしましょう。
WordPressテーマとは、ホスティング上のWordPressテーマディレクトリ内の共通フォルダに配置されたファイル群のことです。
このセットには、HTML、PHP、JavaScript言語で書かれたページテンプレート、CSSスタイルシート、グラフィックが含まれます。
カスタムテーマをゼロから作成する場合、一般的な方法は2つあります。
- 自分で作成する：Web開発の広範な経験と多くの自由な時間が必要です。
- 開発者またはWebエージェンシーに依頼する：平均価格は数百ドルから数千ドルです。
明らかな理由から、これらの方法はどちらも初心者には受け入れがたいものです。
幸いなことに、大金をかけたりコーディングの達人になったりすることなく、カスタムテーマを作成する3番目の方法があります。
これは、SeedProdのようなWordPressウェブサイトビルダーを使用することで可能です。詳しく見ていき、なぜWordPressユーザーの間でこれほど人気があるのかを調べてみましょう。
カスタムWordPressテーマを作成するためにSeedProdを使用する理由
SeedProdは、WordPress向けのナンバーワンAI搭載ウェブサイトビルダープラグインであり、初心者にも使いやすいです。
これは真のゲームチェンジャーです。なぜなら、コーディング不要で、わずか数分でトップクラスのカスタムWordPressテーマを作成できるからです。
秘密の材料は、便利で強力なSeedProdビジュアルエディターです。これを使用すると、必要なサイト要素、ブロック、またはセクション全体をページに簡単にドラッグ＆ドロップできます。
仕組みの簡単なプレビューはこちらです。
SeedProdは、ページとテーマを高速読み込みのために自動的に最適化します。これにより、訪問者にとって最高のユーザーエクスペリエンスを確保できます。
また、デフォルトでレスポンシブでモバイル対応しているため、さまざまなデバイスでサイトがどのように表示されるかを心配する必要はありません。
それに加えて、SeedProdには以下のような強力な機能が付属しています。
- 何百もの既製ページテンプレート：テーマをゼロから作成するインスピレーションが湧きませんか？200以上の事前構築済みテンプレートのいずれかを使用し、ニーズに合わせて簡単にカスタマイズできます。
- WooCommerce連携：オンラインで商品を販売していますか？SeedProdはWooCommerceと完全に互換性があるため、モダンな「近日公開」ページやチェックアウトページ、商品グリッドなどを作成できます。
- Eメール購読者管理ダッシュボード：メールニュースレターをお持ちですか？SeedProdを使用すると、メールを収集し、便利なダッシュボードで購読者のステータスを追跡できます。
- SEOに最適化されたコード：コードの明瞭さについて心配ですか？SeedProdで作成するテーマやページのコードはSEOフレンドリーであり、すべての検索エンジンの要件を満たしています。
さらに、SeedProdには素晴らしいレスポンシブサポートチームがあります。
このプラグインは非常に使いやすいですが、質問がある場合は、いつでも救助に来てくれます。
熱心なユーザーからのフィードバックは、この評価が当然であることを疑う余地を与えません。
SeedProdでの経験について、人々が言っていることは次のとおりです。
初心者向けのカスタムテーマを作成する最良の方法がSeedProdを使用することである理由がわかったので、次に、それをどのように行うかを見てみましょう。
カスタムWordPressテーマの作成方法
この詳細なチュートリアルには6つの簡単なステップがあります。コードに触れることなく、美しいカスタムWordPressテーマを作成するために従ってください。
ナビゲーションに役立つ目次を次に示します。
- ステップ1：SeedProdプラグインのインストールと有効化
- ステップ2：事前構築済みのWordPressテーマの選択
- ステップ3：WordPressテーマパーツのカスタマイズ
- ステップ4：テーマのグローバルCSSのカスタマイズ（コードなし）
- ステップ5：メールマーケティングサービスへの接続
- ステップ6：カスタムWordPressテーマの公開
- ボーナス：カスタム検索フォームと結果ページの作成
ステップ1：SeedProdプラグインのインストールと有効化
始めるには、ここからSeedProdのコピーを入手できます。
次に、SeedProdアカウントにログインして、ダウンロードタブに移動できます。
次に、SeedProd Proのダウンロードボタンをクリックして、プラグインのZIPファイルをコンピューターにダウンロードを開始します。
ダウンロードが完了したら、同じタブでライセンスキーをコピーします。SeedProdのコピーをアクティブ化するために後で必要になります。
次のステップは、ダウンロードしたZIPファイルをサイトにアップロードしてプラグインをインストールすることです。ヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこのチュートリアルに従ってください。
プラグインをインストールした後、SeedProdウェルカム画面が表示されます。ここで、WordPressダッシュボードに移動し、左側のパネルにあるSeedProdボタンをクリックできます。
次に、ライセンスフィールドにライセンスキーを貼り付け、キーを確認ボタンを押します。
SeedProdのコピーをアクティブ化したら、カスタムWordPressテーマの作成を開始する準備ができました。
ステップ2：事前構築済みのWordPressテーマの選択
始めるには、ダッシュボードのSeedProd »テーマビルダーに移動します。
このページでは、カスタムテーマを管理したり、新しいテーマを作成したりできます。
ここから、開始するには2つの方法があります。
1つ目は、カスタムテーマの各部分をゼロから作成することです。
すべてのWordPressテーマは、次の部分で構成されています。
- ヘッダー
- フッター
- シングル投稿
- シングルページ
- アーカイブ（ブログページ）
- ホームページ
- サイドバー
これらのパーツがテーマを構成し、SeedProdでは個別に作成およびカスタマイズできます。
テーマの新しいパーツの作成を開始するには、新しいテーマテンプレートを追加ボタンを押してください。
ここで、テーマパーツの種類を選択し、名前を付けて、最初から構築を開始できます。
しかし、初めて試すには少し圧倒されると感じる場合は、カスタムWordPressテーマを作成する別の方法があります。
SeedProdには、プロフェッショナルな見た目の既製のテーマテンプレートが多数付属しています。それらを選択して、ニーズに合わせてカスタマイズできます。
このチュートリアルでは、初心者にとって簡単で、より多くのSeedProd機能を紹介できるこの方法に焦点を当てます。
既製のテーマテンプレートのカスタマイズを開始するには、テーマテンプレートキットボタンを押してください。
ここでは、さまざまな目的に合わせたさまざまなテーマを見つけることができます。
たとえば、個人ブログ、ポートフォリオ、ビジネスまたはeコマースサイトなどのテーマがあります。
好きなテーマを選択するには、カーソルを合わせてチェックマークアイコンをクリックします。
たとえば、スターターテンプレートの1つを選択します。
テンプレートを選択すると、SeedProdはそれを構成するパーツを自動的に作成します。
ご覧のとおり、私たちのテーマには、ヘッダー、フッター、サイドバーなどのページパーツテンプレートが含まれているだけでなく。
シングルページ、投稿、アーカイブ、ホームページなどのページ全体のテンプレートもあります。
サイトで特定のテンプレートが必要ない場合は、横にあるトグルを切り替えて公開を停止できます。
テンプレートの名前を変更したり、サイトに表示される条件を編集したりするには、条件を編集リンクをクリックします。
これにより、テンプレートの名前を好きなように変更し、タイプ、優先度、条件を変更できるモーダルウィンドウが表示されます。
完了したら、Saveボタンをクリックするだけです。
テーマのパーツを管理する方法がわかったので、カスタマイズを開始する準備ができました。
ステップ3：WordPressテーマパーツのカスタマイズ
まず、訪問者がサイトに来たときに最初に目にするものなので、ヘッダーをカスタマイズしましょう。
ヘッダー
開始するには、テーマビルダーページを下にスクロールし、ヘッダーテンプレートを見つけてクリックします。
注意：ヘッダーとフッターはサイト全体で共通です。つまり、それらに加えたすべての変更は、サイトのすべてのページに表示されます。
ご覧のとおり、私たちのヘッダーは2つの部分で構成されています。左側にはサイトロゴがあり、右側にはナビゲーションメニューがあります。
SeedProdには、ビジュアルドラッグアンドドロップエディターがあります。ページ上の任意の要素と対話したり、ページにドラッグするだけで新しい要素を追加したりできます。
ロゴを変更してみましょう。これを行うには、ロゴをクリックするだけで、要素の設定を編集できるサイドバーが表示されます。
SeedProdエディターの各要素タイプには、独自のさまざまな設定とカスタマイズオプションがあります。
たとえば、私たちのロゴは画像タイプです。そのため、ソースファイル、代替テキスト、サイズなど、通常画像に期待されるすべての設定があります。
さらに多くのカスタマイズオプションを見つけるために、左側のサイドバーにあるコンテンツ、テンプレート、詳細タブを切り替えることもできます。
次に、デフォルトのロゴを独自のロゴに置き換えたいとします。
これを行うには、現在のロゴ画像をクリックしてから、代わりに使用したい画像を選択できます。
テストサイトでの新しいロゴの外観は次のとおりです。
次に、ヘッダーの背景色を変更しましょう。
これを行うには、ヘッダーにカーソルを合わせ、青いアウトラインが表示されたらクリックします。
その後、左側のサイドバーにヘッダーのカスタマイズオプションが表示されます。行要素タイプがあります。
コンテンツタブでは、ヘッダーの背景色を変更したり、画像に置き換えたり、ヘッダーの幅を選択したりできます。
背景色を変更するには、カラーパレットアイコンをクリックして、目的の色を選択します。
次に、詳細タブで、ヘッダーに影や境界線を追加したり、スペーシング設定を変更したりできます。
仕上げとして、ナビゲーションメニューのフォントを少し大きくしましょう。
これを行うには、メニューにカーソルを合わせてクリックします。
次に、左側のサイドバーにあるフォントサイズフィールドに、目的のフォントサイズを入力します。
スライダーを動かすか、数値を入力してフォントサイズを変更するだけです。
ヘッダーのカスタマイズが完了したら、右上隅にある保存ボタンを押します。
次に、終了アイコンを押してビジュアルエディターを終了し、テーマテンプレートページに戻ります。
次に、ホームページをカスタマイズしましょう。
ホームページ
これを行うには、他のテーマテンプレートの中からホームページテンプレートを見つけてクリックします。
スターターテンプレートには、次のような典型的なビジネスサイトで見られる機能を持つホームページがあります。
- ビジネス説明セクション
- クライアントのロゴリスト
- ビジネスの特徴
- お客様の声
- FAQセクション
- など…
ヘッダーと同様に、ページ上のすべての要素を操作して、その外観を変更できます。
たとえば、数回クリックするだけで、ヒーローセクションのタイトル、説明、ボタンのテキストを簡単に変更する方法を確認できます。
次に、ページに新しいものを追加してみましょう。
ページ上のどの要素も現在選択されていない場合、左側のサイドバーに「ブロック」タブが表示されます。
コーディング不要で、数回のクリックでページに追加できる既製のブロックがたくさん用意されています。
たとえば、投稿者、価格表、検索フォームなどのブロックを見つけることができます。
特定のブロックをページに追加するには、目的の場所までドラッグアンドドロップします。
たとえば、「機能」セクションに「カウントダウン」ブロックを追加してみましょう。
さらに、「セクション」タブに移動すると、次のような多くの既製のセクションが見つかります。
- ヘッダー
- フッター
- 行動喚起
- 機能
- お客様の声
- その他多数…
ページに新しいセクションを追加するには、目的のセクションにマウスカーソルを合わせ、プラスアイコンをクリックします。
たとえば、ページに新しい「行動喚起」セクションを追加してみましょう。
デフォルトでは、新しいセクションはページの一番最後に表示されます。
セクションの位置を変更するには、セクションの上部境界線にカーソルを合わせ、「セクションの移動」オプションを選択し、ブロックと同じようにドラッグします。
ホームページのカスタマイズが完了したら、モバイルデバイスでの表示を確認できます。
これを行うには、左下隅にあるモバイルプレビューアイコンをクリックします。
正しく表示されていないブロックやセクションがある場合は、それらを移動できます。
このようにして、モバイルバージョンが最高のユーザーエクスペリエンスを提供することを保証できます。
ホームページに満足したら、行ったすべての変更を保存するために「保存」ボタンを押すことを忘れないでください。
ブログインデックス、アーカイブ、検索ページ
次に、「ブログインデックス、アーカイブ、検索」という名前のテンプレートを見てみましょう。
名前から推測できるように、このテンプレートはブログ投稿ページ、アーカイブ、検索結果の表示を担当します。
これにより、3つのページの表示を一度に変更できるため便利です。
すでにページのカスタマイズ方法、および新しいブロックやセクションの追加方法を学習したので、特定の要素の設定に焦点を当てましょう。
たとえば、「投稿」要素をクリックすると、投稿の順序を変更したり、特定のカテゴリ、タグ、または投稿者からの投稿を除外したりできます。
さらに、投稿リストのレイアウトを完全にカスタマイズできます。
つまり、列数と1ページあたりの投稿数を変更したり、投稿者名、公開日、時刻、コメント数の表示を変更したりできます。
ウェブサイトビルダーがコーディング不要でこのようなことを制御できることはまれであり、SeedProdの人気が高いもう一つの理由です。
シングル投稿
ブログページのカスタマイズが完了したら、「シングル投稿」テンプレートも編集しましょう。
典型的なブログ投稿には、次の部分があります。
- アイキャッチ画像
- 投稿タイトル
- 投稿情報
- 投稿コンテンツ
- 著者ボックス
- コメントセクション
一番良い点は、SeedProdを使えば、これらの各部分を完全にカスタマイズできることです。
例えば、投稿情報要素をクリックすると、新しい便利なデータを追加できます。
それは、公開または更新日時、投稿著者の追加情報、または指定したいその他の情報である可能性があります。
例えば、投稿情報セクションにコメント数を表示させたいとしましょう。開始するには、アイテム追加ボタンを押します。
次に、タイプドロップダウンメニューをクリックし、コメントオプションを選択します。
その後、コメント数が投稿情報要素内に表示されるようになります。
このように、ページ上のあらゆる要素を簡単にカスタマイズできます。
サイドバー
テーマのサイドバーの外観も変更してみましょう。テーマビルダーダッシュボードに移動し、サイドバーテンプレートをクリックします。
サイドバーはWordPressサイトの所有者の間で非常に人気があります。
関連性の高いウェブサイト要素、例えば最新投稿のリスト、購読フォームなどを配置するのに最適な場所です。
SeedProdでは、他のテンプレートと同じようにサイドバーを完全にカスタマイズすることもできます。
例えば、数回のクリックでサイドバーにメールニュースレター登録フォームを追加できます。
これを行うには、単にブロックタブからオプトインフォーム要素をサイドバーにドラッグアンドドロップします。
次に、それをクリックすると、フィールド数、そのタイプなどを変更できます。
SeedProdのビジュアルエディタ内でどのように作業するかを理解したので、テーマのグローバルCSSをカスタマイズする準備ができました。
ステップ4：テーマのグローバルCSSのカスタマイズ（コードなし）
まず、CSSとは何か、そしてこのファイルを編集することでサイトのグローバルな外観をどのように変更できるかを明確にしましょう。
CSSはCascading Style Sheetsの略です。サイトのグローバルなスタイリング、タイポグラフィ、色を決定するコードが含まれているファイルです。
CSSファイル内の要素の外観を変更すると、その変更はサイト全体でその要素に適用されます。
すべてのWordPressテーマには独自のCSSファイルがあります。通常、それを変更するには、Web開発のバックグラウンドが必要です。
しかし、SeedProdを使用すると、シンプルで初心者向けの簡単なエディタでサイトのグローバルCSSをカスタマイズできます。
開始するには、テーマテンプレートダッシュボードでグローバルCSSテンプレートをクリックします。
これにより、グローバルCSS設定のビジュアルエディタに移動します。
左側には、サイトの色、フォント、背景などを変更できるタブがあります。
そして右側では、リアルタイムで行った変更の結果を確認できます。
例えば、見出しのフォントを変更してみましょう。
そのために、フォントタブをクリックできます。
H1からH6までのすべて見出しのフォントを変更するには、ヘッダーフォントタイトルの下のドロップダウンメニューから新しいフォントを選択します。
フォントの色を変更するオプションもあります。
特定のヘッダーのフォントを変更したい場合は、H1～H6設定を表示トグルを切り替えることができます。
次に、選択したヘッダーのタイポグラフィオプションの横にある編集ボタンをクリックし、希望のフォントを選択します。
例えば、H1ヘッダーフォントをComic Sansに変更します。ご覧のとおり、フォントは即座に変更されました。
CSS設定の調整が完了したら、右上にある保存ボタンをクリックして、行った変更を保存します。
このようにして、カスタムWordPressテーマの外観に関連する多くのことをカスタマイズできます。
グローバルCSS設定の編集方法がわかったので、次に進み、メールマーケティングサービスアカウントを接続する準備ができました。
ステップ5：メールマーケティングサービスへの接続
SeedProdは、最も人気のあるメールマーケティングサービスとシームレスに統合されています。このリストには、Mailchimp、Constant Contact、Dripなどが含まれますが、これらに限定されません。
これは、すでにアクティブなメール購読者のベースを持っている場合や、最初のメールリストの成長を開始したい場合に朗報です。
メールマーケティングアカウントを接続するには、まずテーマビルダータブに移動し、いずれかのテンプレートをクリックします。
次に、トップパネルの接続タブに移動します。
そこに到着したら、使用しているサービスの上にカーソルを合わせ、接続ボタンを押して、画面の指示に従います。
メールサービスへの接続が完了したら、右上にある保存ボタンを押して変更を保存します。
これで、SeedProdはオプトインフォームに入力した訪問者のメールを収集し、メールベースに追加します。
ステップ6：カスタムWordPressテーマの公開
最後のステップは、カスタムテーマを公開し、ウェブサイトでライブにすることです。
そのために、まずWordPressダッシュボードからSeedProd » テーマビルダーに移動します。
次に、右上にあるSeedProdテーマを有効にするトグルを切り替えます。
これで完了です。カスタムWordPressテーマがライブになり、サイトで確認できます。
そのために、ウェブサイトにアクセスして新しいカスタムテーマを確認するだけです。
例えば、デモサイトでカスタマイズしたホームページはこちらです：
そして、SeedProdを使用して数回クリックするだけでカスタマイズした単一のブログ投稿テンプレートはこちらです：
ボーナス：カスタム検索フォームと結果ページの作成
さて、新しいカスタムテーマのWordPressサイトで検索エクスペリエンスも強化したいですか？
デフォルトのWordPress検索には多くの機能が欠けており、特にサイトに多くの記事や商品がある場合、関連性の高い結果を返すことがよく失敗します。
ここでSearchWPがお役に立ちます。これはWordPress向けの最高の検索プラグインであり、カスタムフィールド、タグ、カテゴリ、商品詳細、メディアファイル、ドキュメントなどを検索プロセスに含めることで、デフォルトの検索を強化します。
SearchWPを使用すると、カスタム検索フォームを設定し、特定の検索エンジンにリンクさせることができます。また、事前構築済みのレイアウトや多くのカスタマイズオプションも提供しています。
それだけではありません！SearchWPにはWordPress用の結果テンプレートも付属しています。検索結果がサイトにどのように表示されるかをカスタマイズし、事前構築済みのテンプレートから選択できます。
詳細については、WordPressでプロフェッショナルな検索ページを作成する方法に関するガイドをご覧ください。
この記事がお役に立ち、コーディング不要で6つの簡単なステップでカスタムWordPressテーマを作成する方法を学べたことを願っています。また、サイトの検索を強化する最高のWordPress検索プラグインに関するガイドや、WordPressで検索ページを作成する方法に関するガイドもご覧ください。
WordPressの検索をさらに改善したい場合は、ここからSearchWPを使い始めることができます。
