5つのステップでカスタムWordPressテーマを簡単に作成する方法

公開: 2022-07-19

中小企業のWebサイト用にカスタムのWordPressテーマを作成しますか?

WordPressのテーマ開発は、テーマデザインを最初からコーディングしたり、高価な開発者を雇ったりすることなく、困難でした。 ただし、最近では、簡単なドラッグアンドドロップ機能を使用してテーマを視覚的に作成できる強力なWordPressプラグインが利用可能です。

この記事では、コードを1行も触れずに、WordPressテーマを最初から作成する方法を説明します。

目次
  1. ステップ1.SeedProdプラグインをインストールしてアクティブ化します
  2. ステップ2.WordPressテーマテンプレートを選択する
  3. ステップ3.テーマパーツをカスタマイズする
  4. ステップ4.Eメールマーケティングサービスを接続する
  5. ステップ5.カスタムWordPressテーマを公開する

WordPressのテーマをカスタマイズする理由

インターネットは、ターゲットオーディエンスの注意を争う何百万ものWebサイトで忙しいです。 あなたが違うことを目立たせて示す一つの方法は、ウェブ上であなたの家をカスタマイズすることです:あなたのウェブサイト。

多くのWordPressWebサイトの所有者は、箱から出してすぐにスターターテーマに固執するため、カスタマイズすると、サイトを競合他社から際立たせることができます。 さらに、カスタムのWordPressテーマを使用すると、ブランドの個性をアピールしたり、リード生成機能を追加したり、Webサイトの速度とパフォーマンスを向上させたりすることが簡単になります。

ゼロからWordPressテーマを作成するにはどうすればよいですか?

ほとんどのWordPressテーマは、HTML、CSS、PHP、およびJavaScriptコーディング言語で作成されています。 これらの言語を学ぶには時間とトレーニングが必要ですが、これは多くのWebサイト所有者にとって現実的ではありません。

つまり、唯一の選択肢の1つは、開発者または開発代理店を雇ってカスタムテーマを作成することです。 その結果、カスタムWordPressサイトのコストは数千ドルに達する可能性があります。

別のオプションは、SeedProdを使用して独自のカスタムWordPressテーマを作成することです。 この強力なWordPressプラグインには、初心者でも誰でもWordPressテーマのあらゆる側面をカスタマイズするために使用できる簡単なドラッグアンドドロップインターフェイスが付属しています。

なぜSeedProdを使用する必要があるのですか?

SeedProdは、WordPress用の最もユーザーフレンドリーなウェブサイトビルダープラグインです。

seedprod WordPress website builder

豊富なカスタマイズオプションが含まれており、次のようなさまざまな機能を提供します。

  • WordPressテーマビルダー
  • 170以上のランディングページテンプレート
  • フルWordPressテーマキット
  • ドラッグアンドドロップビルダー
  • Eメールマーケティングの統合
  • インポート/エクスポート機能
  • 加入者管理
  • 近日公開、メンテナンスモード
  • とはるかに。

以前は、SeedProdを使用して、既存のテーマ内にランディングページを作成することしかできませんでした。 しかし、ゲームを変えるいくつかの更新の後、同じドラッグアンドドロップビルダーでWordPressテーマ全体を作成できます。

つまり、コーディングせずにWebサイトを上から下にカスタマイズできるので、その方法を見てみましょう。

SeedProdを使用してカスタムWordPressテーマを作成する

このチュートリアルでは、ドメインでホストされているWordPressサイトがすでにあることを前提としています。 そうでない場合は、WordPressWebサイトの作成に関するこのステップバイステップガイドに従うことができます。

SeedProdは、現在のWordPressテーマを最初から作成するテーマに置き換えるため、開発環境を使用することをお勧めします。 そうすれば、変更を公開する準備ができるまで、変更がライブWebサイトに影響を与えることはありません。

Bluehostのような人気のあるWordPressホスティングサービスは、ホスティングパッケージを使用してステージングおよび開発環境を提供します。

bluehost WordPress hosting

ステージング環境を作成するだけでなく、開始する前にサイトをバックアップしてください。 これにより、問題が発生した場合にWebサイトを復元できるようになります。 WordPressに最適なバックアッププラグインについては、この投稿を参照してください。

上記を準備した後、以下の手順に従ってカスタムWordPressテーマの作成を開始できます。

ステップ1.SeedProdプラグインをインストールしてアクティブ化します

最初のステップとして、WordPressサイトにSeedProdプラグインをインストールしてアクティブ化する必要があります。 この手順でヘルプが必要な場合は、WordPressプラグインのインストールに関するこの詳細なガイドに従ってください。

テーマビルダー機能のロックを解除するには、SeedProdProライセンスを選択する必要があります。 これにより、プラグインの設定ページで入力できるライセンスキーが提供されます。

ライセンスキーを見つけるには、SeedProdアカウントにログインし、[ダウンロード]タブをクリックしてから、コピーアイコンをクリックして、キーをクリップボードに保存します。

Copy the SeedProd license key

その後、WordPress管理者に移動し、 SeedProd»設定に移動して、キーを[ライセンスキー]フィールドに貼り付けます。 次に、[キーの確認]ボタンをクリックして変更を保存します。

Paste the SeedProd license key in WordPress

次に、 SeedProd»テーマビルダーページに移動します。このページでは、SeedProdがテーマのさまざまな要素を表示します。

SeedProd theme builder

SeedProdを使用してカスタムWordPressテーマを作成するには2つの異なる方法があります。 テーマの各部分を最初から作成することも、事前に作成されたテンプレートを使用して、Webサイトのニーズに合わせて各部分をカスタマイズすることもできます。

各WordPressテーマは、テンプレートファイルと呼ばれる複数の部分で構成されています。

  • ヘッダ
  • フッター
  • 単一の投稿
  • 単一ページ
  • アーカイブまたはブログページ
  • の検索結果
  • グローバル部分
WordPress theme template files

テーマを最初から作成するのが初めての場合、これは非常に圧倒される可能性があります。 そのため、事前に作成されたテーマテンプレートから始めることをお勧めします。

SeedProdには、ワンクリックでテーマ構造を設定するさまざまなレスポンシブテーマテンプレートがあります。 各テンプレートファイルを自動的に生成しますが、独自のカスタマイズで各ファイルを編集することもできます。

このガイドの残りの部分では、テーマテンプレートを使用して、カスタマイズプロセスの各ステップを示します。これは、カスタムテーマを作成するための最も初心者に優しいアプローチだからです。

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

SeedProdのすべてのテーマテンプレートを表示するには、[テーマ]ボタンをクリックします。

Click the themes button

ウィンドウが開き、ポートフォリオ、旅行、WooCommerceストア、不動産、イベントなど、さまざまなタイプのWebサイトのテーマが表示されます。

このチュートリアルではスターターテーマを使用するので、テーマの画像の上にマウスを置いて、オレンジ色のチェックマークアイコンをクリックします。

Choose a WordPress theme template

クリックしてテーマテンプレートをインポートするとすぐに、SeedProdはテーマパーツを自動的に生成します。

Custom WordPress theme template parts

特定のテーマパーツが必要ない場合は、[公開済み]見出しの下にある[いいえ]の位置にあるトグルをクリックしてオフにします。

Turn off a WordPress theme part

[条件の編集]リンクをクリックして、各パーツの条件を変更することもできます。

edit theme part conditions

これにより、パーツの名前、タイプ、優先度、およびパーツをWebサイトに表示する場所を選択できるウィンドウが開きます。

Theme part condition settings

多くの場合、これらの設定を変更する必要はなく、各パーツの外観のカスタマイズにすぐに進むことができます。

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

テーマの重要な部分が設定されたので、希望どおりにデザインをカスタマイズできます。 テンプレートファイルを編集するには、カーソルをそのファイルに合わせて、[デザインの編集]リンクをクリックします。

Customize a theme part

このガイドでは、ヘッダー、フッター、ホーム、ブログの各部分をカスタマイズします。 他のテーマパーツのカスタマイズも同じ原則に従います。

WordPressヘッダーとフッターのカスタマイズ

ヘッダーをカスタマイズするには、カーソルをヘッダーテンプレートの上に移動し、[デザインの編集]をクリックします。

Edit WordPress header design

次の画面に、SeedProdのテーマビルダーインターフェイスが表示されます。 ライブプレビューの任意の場所をポイントしてクリックすると、左側のパネルに各要素の設定が表示されます。

SeedProd WordPress theme builder interface

まず、デフォルトのSeedProdロゴをクリックして、画像ブロックの設定を開きます。 コンテンツ設定パネルで、ごみ箱アイコンをクリックしてデフォルトの画像を削除し、コンピューターまたはWordPressメディアライブラリから新しいロゴをアップロードできます。

Customize WordPress logo

同じパネルで、画像のサイズや配置を変更したり、ロゴにカスタムリンクを付けたりすることができます。 たとえば、ロゴをクリックした訪問者をホームページにリダイレクトできます。

seedprod image block settings

行設定アイコンをクリックして、ヘッダーの背景色を変更することもできます。 そこから、背景画像、色、またはカスタムの背景グラデーションを追加できます。

Header row customization options

次に、ライブプレビューのメニューブロックをクリックして、ナビゲーションメニューをカスタマイズします。 SeedProdは、デフォルトでこのセクションのNav Menuブロックを使用します。これには、2つの異なるメニューオプションがあります。

  • シンプル:ビルダーインターフェイスでメニューリンクを個別に追加します
  • WordPressメニュー:ネイティブのWordPressメニューを使用してナビゲーションを表示します
Navigation menu block settings

メニュータイプを選択したら、[詳細設定]タブをクリックして、メニューリンクの色、タイポグラフィ、スタイルなどを変更できます。

Advanced navigation menu settings

ヘッダーのデザインに満足したら、右上隅にある[保存]ボタンをクリックし、[X]アイコンをクリックしてテーマビルダーを終了します。

Save custom WordPress theme header

これで、同じ手順に従ってWordPressフッターをカスタマイズできます。完了したら、ホームページの編集に進むことができます。

WordPressホームページのカスタマイズ

あなたのウェブサイトのホームページはあなたのサイトのフロントページであり、通常あなたのビジネスを定義する重要な要素を含んでいます。 たとえば、あなたが誰であるか、何をしているのか、レビューと推薦状、連絡先情報などの詳細。

Customize WordPress homepage sections

使用しているテンプレートには、次のホームページセクションが含まれています。

  • ヒーロー
  • 特徴
  • お客様の声
  • よくある質問

レイアウト、画像、コンテンツ、ボタンなど、このページのあらゆる側面を変更できます。 この簡単な例を見て、ホームページのさまざまな部分を編集するのがいかに簡単かを確認してください。

customize WordPress theme

左側のブロックとセクションを使用して、すべてがどのように見えるかに満足するまでホームページを編集できます。 たとえば、星の評価、Googleマップ、検索フォーム、その他多くのWebサイト要素を追加できます。

ホームページのモバイル版を確認することも重要です。

Mobile preview icon

サイトのモバイル版が正しく表示されない場合は、完全に表示されるまで編集を続けることができます。

Mobile WordPress theme preview

ホームページのデザインに満足したら、変更を保存して、SeedProdテーマビルダーダッシュボードに戻ります。

カスタムブログページのスタイリング

カスタマイズする次のテーマ部分はブログページです。 テーマビルダーのダッシュボードから、ブログ、インデックス、アーカイブ、検索の見出しを探し、[デザインの編集]リンクをクリックします。

Edit WordPress blog page

このページでは、ブログ投稿のコンテンツ、注目の画像、抜粋、著者の経歴など、さまざまな要素を追加、削除、移動できます。

WordPress blog page layout

デフォルトでは、このテンプレートはPostsブロックを使用して最近のブログ投稿のリストを表示するため、このテンプレートをクリックして、構成可能なさまざまな設定を表示します。

Posts block settings

投稿設定パネルでは、ブログ投稿の種類を選択して、ページネーション、メタ、作成者の詳細、コメント数などの情報を表示および非表示にすることができます。

ブログページをカスタマイズしたら、[保存]ボタンをクリックして、テーマビルダーのダッシュボードに戻ります。

グローバル設定の定義

最後に説明するテンプレート部分では、テーマボタン、色、タイポグラフィ、およびレイアウトのグローバルなスタイル設定を制御します。 グローバルCSSパーツを探し、[デザインの編集]リンクをクリックして設定を開きます。

Edit global css template

この画面の各タブを展開して、さまざまな設定をカスタマイズできます。

Global CSS settings

たとえば、[ボタン]タブを開いて、Webサイト上のすべてのボタンのデフォルトスタイルをカスタマイズできます。

Global WordPress theme button settings

さらに、フォント、レイアウト、背景を変更したり、WordPressテーマにカスタムCSSを追加したりできます。 行った各変更は、Webサイト全体に自動的に適用されます。

次に進む前に、必ず[保存]ボタンをクリックして変更を保存してください。

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

テーマデザインでオプトインフォームまたは連絡先フォームブロックを使用した場合は、メーリングリストに新しい連絡先を追加する方法が必要になります。 幸い、SeedProdは人気のあるEメールマーケティングサービスと直接統合して、これを簡単にします。

デザインを編集するときに[接続]タブをクリックすると、SeedProdの電子メール統合を見つけることができます。 そこから、メールマーケティングサービスを見つけて、画面の指示に従って接続できます。

SeedProd email marketing services

SeedProdは、電子メールサービスと直接統合するだけでなく、組み込みのサブスクライバーダッシュボードに連絡先を保存できます。 これは、メーリングリストの作成を開始していて、まだプロバイダーを選択していない場合に役立ちます。

SeedProd subscriber dashboard

ステップ5.カスタムWordPressテーマを公開する

カスタムWordPressテーマをカスタマイズしたので、次はそれをWebサイトで公開します。 これを行うには、テーマビルダーダッシュボードに移動し、 [SeedProdテーマを有効にする]の横にあるトグルを[オン]の位置に回します。

Enable seedprod theme

その後、Webサイトのフロントエンドに移動して、新しいカスタムWordPressテーマを確認できます。

create custom WordPress theme example

あります!

この投稿が、コーディングせずにWordPressテーマを最初から作成する方法を学ぶのに役立つことを願っています。

SeedProdにはRafflePressブロックも含まれていることをご存知ですか? カスタムテーマデザインのどこかにRafflePressの景品を追加すると、トラフィック、リード、ソーシャルメディアのフォロワーを非常に簡単に増やすことができます。

飛び込む準備はできましたか?

ここでSeedProdの使用を開始し、ここでRafflePressのコピーを入手してください。

この記事が気に入った場合は、RafflePressビデオチュートリアルのYouTubeチャンネルに登録してください。 TwitterやFacebookでも私たちを見つけることができます。