カスタムWordPressテーマをゼロから作成したいですか？
以前は、カスタムWordPressテーマを作成するために、複雑なWordPressチュートリアルに従い、かなりのコーディング知識が必要でした。しかし、新しいWordPressテーマビルダーのおかげで、プログラミングスキルを学ぶことなく簡単に作成できるようになりました。
この記事では、コードを書かずにカスタムWordPressテーマを簡単に作成する方法を説明します。
この記事で取り上げるトピックのリストを以下に示します。
- 初心者のためのカスタムWordPressテーマの作成
- SeedProdテーマビルダーでカスタムテーマを作成する
- SeedProd Theme Builderでのテーマの編集
- テーマのサイト全体のデザインを変更する
- カスタム WordPress テーマの適用と公開
- カスタム WordPress テーマの他のレイアウトを作成する
準備はいいですか？始めましょう。
動画チュートリアル
書き言葉での説明をご希望の場合は、そのままお読みください。
初心者のためのカスタムWordPressテーマの作成
WordPressウェブサイトは、ウェブサイトのレイアウトとデザインのためにテーマを使用します。これらのテーマは、PHP、HTML、CSS、JavaScriptで書かれたテンプレートファイルで構成されています。
通常、カスタムWordPressテーマを作成するには、これらのWebデザイン言語すべてについて十分な理解が必要です。または、Web開発者を雇う必要があります。
開発者や代理店に依頼した場合、カスタムWordPressテーマの費用は数千ドルに達する可能性があります。
多くの小規模ビジネスオーナーは、カスタム WordPress テーマの高額な費用を負担できなかったため、デフォルトのテーマで妥協していました。妥協したくなかった人は、WordPress のページビルダーまたはテーマフレームワークを使用してカスタムテーマを構築していました。
WordPressのテーマフレームワークはWordPressテーマの構築を容易にしましたが、それらは平均的なウェブサイト所有者向けではなく、開発者向けのソリューションでした。
一方、WordPressのページビルダープラグインは、ドラッグ＆ドロップインターフェイスを使用してカスタムページレイアウトを簡単に作成できるようにしましたが、それらは単一のページレイアウトに限定されていました。それらを使用してカスタムテーマを構築することはできませんでした。
ここで SeedProd が登場します。
コードを書かずにカスタム WordPress テーマを簡単に作成できる、最高の WordPress テーマビルダープラグインです。
SeedProdは、ビジネス、ブロガー、ウェブサイト所有者向けのドラッグ＆ドロップWordPressページビルダーです。また、新しいカスタムテーマデザイナーも搭載されており、ポイント＆クリックで任意の要素を編集できます。
よく使うデザイン要素をドラッグ＆ドロップでテーマに追加することもできます。
SeedProdのテーマビルダーの最も良い点は、テーマに依存しないことです。つまり、既存のWordPressテーマのスタイルや機能に依存しないため、ウェブサイトのデザインを完全に自由にコントロールできます。
代替案をお探しの場合、Thrive Theme Builder プラグインを使用しても、カスタム WordPress テーマを簡単に作成できます。
それでは、SeedProdを使用してコーディングなしでカスタムWordPressテーマを作成する方法を見てみましょう。
SeedProdテーマビルダーでカスタムテーマを作成する
SeedProdテーマビルダーの設定は非常に簡単です。どのテーマを使用しているWordPressウェブサイトでも機能します。
まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。
注意: テーマビルダーのロックを解除するには、Pro または Elite プランが少なくとも必要です。
有効化したら、SeedProd » 設定ページに移動して、プラグインライセンスキーを入力してください。この情報は、SeedProdウェブサイトのあなたのアカウントで見つけることができます。
ライセンスキーを入力すると、SeedProdテーマビルダーを使用してカスタムWordPressテーマを作成する準備が整いました。
SeedProd を使用して独自のカスタム WordPress テーマを作成するのは非常に簡単です。
まず、SeedProd » Theme Builderページに移動する必要があります。ここでは、現在のSeedProdカスタムテーマのテンプレートリストが表示されます。まだ開始していないため、グローバルCSSテンプレートしかありません。チュートリアルの後半でこれを使用する方法を説明します。
開始するには、2つのオプションがあります。
- あらかじめ用意されたSeedProdのテーマのいずれかを開始点として使用します
- テーマテンプレートをゼロから手動で作成する
これらのオプションがどのように機能するか見てみましょう。
1.既製のテーマから始める（推奨）
既存のテーマから始めることをお勧めします。これにより、SeedProdはすべてのテンプレートファイルを自動的に生成できます。これらは完全にプロフェッショナルにデザインされたテーマであり、テンプレートを独自の要件に合わせて編集する際の大きな助けとなります。
[Themes] ボタンをクリックして、利用可能なテーマのいずれかを選択するだけです。さまざまな種類のウェブサイトに対応したさまざまなテーマがあるので、ニーズに最も合ったものを選択できます。
この時点では、デザインやレイアウトについてあまり心配しないでください。これらのテーマはすべて完全に編集可能なので、テーマビルダー内であらゆる側面を変更できます。
テーマを選択すると、SeedProd がすべてのテーマテンプレートを生成します。
これはカスタムWordPressテーマの下書きバージョンです。
このチュートリアルの後半で、これらのテーマファイルを編集してテーマをデザインし、テーマを公開してウェブサイトに適用する方法を説明します。
6. テーマテンプレートをゼロから手動で作成する
または、「新しいテーマテンプレートを追加」ボタンをクリックして、テーマをゼロから開始することもできます。テンプレートに名前を付け、テンプレートタイプを選択して開始する必要があります。
現在、以下のテンプレートタイプから選択できます。
テンプレートを使用するための条件を設定することもできます。たとえば、サイト全体またはウェブサイトの特定のセクションに適用できます。
テンプレートを保存すると、SeedProdはそれをテーマビルダーで開き、編集を開始できます。
SeedProd Theme Builderでのテーマの編集
テーマテンプレートを生成したら、SeedProd Theme Builderを使用して編集できます。
テンプレートファイルを編集するには、その下の「デザインを編集」リンクをクリックするだけです。
これにより、SeedProdテーマビルダーでテンプレートファイルが起動します。
右側の列にテンプレートのライブプレビューが表示され、左側の列に編集パネルが表示されます。
テンプレートファイル内のアイテムを変更するには、ポイントアンドクリックで編集できます。
アイテムの種類に応じて、左側の列に異なる編集オプションが表示されます。フォント、色、背景、間隔などを変更できます。
新しいアイテムを追加するには、左側の列からSeedProdブロックを追加できます。テンプレートに追加できるさまざまな種類のブロックが用意されています。
1. テンプレートタグブロック
テンプレートタグブロックは、WordPressデータベースから動的にテーマ要素を生成できるダイナミックブロックです。
例えば、投稿ブロックを使用して最近の投稿を一覧表示したり、投稿コンテンツブロックを使用して現在表示されている投稿またはページのコンテンツを表示したりできます。
2. 標準ブロック
次に、テーマのテンプレートに一般的なウェブデザイン要素を追加するための標準ブロックがあります。
テキスト、メディア、ボタン、カラム、区切り線などを追加するために使用できます。
3. その他のブロック
その他の高度なブロックでは、お問い合わせフォーム、ソーシャルプロフィール、共有ボタン、WordPressショートコード、Googleマップ、価格リスト、カウントダウンタイマーなどを追加できます。
SeedProdには、完全なWooCommerce統合も付属しています。
オンラインストアを運営している場合は、WooCommerce ブロックをテーマで使用できます。
カスタムカートページとチェックアウトエクスペリエンスで、完全にカスタムなWooCommerceテンプレートを作成できます。カスタムカートページ
セクションを使用したクイックテーマレイアウト
ブロック以外にも、テーマテンプレートに完全なセクションを追加することもできます。
デザインパネルのセクションタブに切り替えるだけです。
セクションは、ウェブサイトデザインのさまざまな領域のブロックのグループです。たとえば、ヘッダー、フッター、コールトゥアクション、機能などのためにすぐに使用できるセクションが見つかります。
セクションをクリックするだけでテーマテンプレートに追加でき、その後、要件に合わせて編集できます。
AIウェブサイトビルダーを使用してコンテンツを即座に生成する
SeedProdは、テーマテンプレートの文章を自動作成する強力なAIウェブサイトビルダーも提供しています。魅力的な見出し、説明文、行動喚起、本文などを瞬時に生成できます。
SeedProdビルダーのヘッドラインまたはテキストブロックをクリックするだけで、左側の設定パネルが開きます。次に、「AIテキストを生成」ボタンをクリックします。
次に、AIアシスタントに何を作成してほしいかの説明であるプロンプトをテキストフィールドに入力します。または、リストから提案されたプロンプトを選択することもできます。
その後、「テキストを生成」ボタンをクリックします。
数秒で、SeedProd が自動的にコンテンツを作成します。そこから、テキストを最適化したり、トーンを変更したり、テキストを 50 以上の言語に翻訳したりできます。
コンテンツに満足したら、「挿入」ボタンをクリックしてテーマテンプレートに追加します。
AI Website Builder の DALL-E 統合を使用して、テーマのオリジナル画像を自動生成することもできます。
画像ブロックをページにドラッグし、クリックして設定パネルを開きます。次に、「AIで追加」ボタンをクリックします。
次に、作成したい画像の簡単な説明を入力し、「画像を生成」ボタンをクリックします。
画像が生成されると、SeedProd がそれを表示します。画像をテーマテンプレートに追加するには、[Insert] ボタンをクリックします。
AIで画像を編集したり、画像のバリエーションを生成したりして、思い描いた通りのビジョンに合わせることもできます。
テンプレートの保存と公開
デザインに満足したら、保存ボタンをクリックして公開を選択するだけでテンプレートを保存できます。
プロセスを繰り返して、他のテンプレートファイルを独自のコンテンツとデザインのニーズに合わせて編集します。
テーマのサイト全体のデザインを変更する
テーマテンプレートを編集する際は、ウェブサイト全体でデザインが一貫していることを確認したいはずです。
例えば、すべてのページで同じタイポグラフィスタイル、フォントサイズ、色、その他のビジュアルスタイルを使用したいと思うでしょう。
従来のWordPressテーマでは、複雑なCSSファイルを編集して手動で行う必要がありました。このプロセスには、ブラウザのInspectツールを使用したり、CSSクラスを見つけたり、コードを学んだりする必要がありました。
SeedProd もこれを非常に簡単にします。
CSSコードを記述する代わりに、グローバルCSSテンプレートを編集するだけで済みます。
グローバルCSSテンプレートを使用すると、一般的なウェブサイト要素をプレビューでき、それらをポイント＆クリックしてプロパティを編集できます。
カスタム WordPress テーマの適用と公開
カスタム WordPress テーマに満足したら、最後のステップはそれをあなたのWordPress ウェブサイトにアクティブ化することです。
SeedProdを使用すると、簡単な切り替えでカスタムWordPressテーマを適用できます。
SeedProd » テーマビルダーページに移動し、「SeedProdテーマを有効にする」オプションの横にあるスイッチを「はい」に切り替えるだけです。
SeedProdは、作成したカスタムWordPressテーマで既存のWordPressテーマを置き換えます。
これで、ウェブサイトにアクセスして、カスタム WordPress テーマが機能していることを確認できます。
カスタム WordPress テーマの他のレイアウトを作成する
カスタムWordPressテーマを作成したので、その機能を拡張し、テーマに基づいたより多くのデザインやレイアウトを作成するオプションがあります。
SeedProdはそれを非常に簡単にします。
カスタムWordPressテーマを調整して、ウェブサイトのさまざまなセクションに複数のテンプレートを作成できます。
例えば、特定のカテゴリにのみ表示される新しいヘッダーテンプレートをテーマに追加したい場合があります。
同様に、特定のページや投稿のテンプレートを作成したい場合もあります。
それをあなたのテーマにも追加できます。
カスタムランディングページを作成するのはどうですか？
SeedProd がそれもカバーしています。
SeedProd » ランディングページに移動し、「新しいランディングページを追加」ボタンをクリックするだけで作成できます。
詳細については、WordPressでランディングページを作成する方法に関するチュートリアルをご覧ください。
SeedProdの初心者向けのドラッグアンドドロップテーマビルダーを使用すると、必要なカスタムレイアウトを簡単に作成できます。
この記事が、コーディングを学ぶことなくカスタムWordPressテーマを作成する方法を学ぶのに役立ったことを願っています。また、SEOとユーザーエクスペリエンスを向上させるためにWordPressウェブサイトを高速化する方法に関するガイド、または最高のWordPress分析ソリューションの選択肢もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mrteesurez
これは素晴らしいですね。素晴らしいチームによる素晴らしいツールです。Seedprodは、コーディングや技術的な専門用語を扱うことなくWordPressテーマを作成できる強力なツールであり、スターターテーマテンプレートも用意されています。
しかし、テーマをインストールしたり、別のWordPressサイトで使用したりすることは可能でしょうか？
WPBeginnerサポート
SeedProdを使用して、テーマファイルをエクスポートし、別のサイトで使用できます。
管理者
Mrteesurez
テーマファイルをエクスポートして他の場所で使用できると聞いて嬉しいです。返信していただきありがとうございます。つまり、テーマを使用したいウェブサイトにSeedprodがインストールされている必要があるということですね。
イジー・ヴァネック
Mrteesurezさん、それは素晴らしいアイデアですね。全く思いつきませんでした。WPBeginnerチームがそれが可能だと確認してくれたことを嬉しく思います。私もSeedProdを持っており、このアイデアに興味があります。これに関するガイドはどこかにありますか、それとも作成する予定ですか？
Ayanda Temitayo
わあ、ずっとPHPプログラマーでなければWordPressテーマは作れないと思っていました。別のWordPressプラグインでテーマが作れるなんて思いもよりませんでした。これはWordPressにとって素晴らしい進歩であり、WordPressとその熱心な開発者コミュニティが日々素晴らしいものにしてくれていることに感謝します。
SeedProdは非常に強力です。その機能を学んでおり、実装も試してみるつもりです。
素晴らしい記事
WPBeginnerサポート
Thank you and glad we could share how to make a theme without the requirement of coding knowledge
管理者
Mrteesurez
最初は私も同じように感じていました！WordPressが進化し、コーディングの専門家でなくても、より多くの人々がテーマ作成にアクセスできるようになったのは驚くべきことです。SeedProdは、ドラッグアンドドロップビルダーと既製のテンプレートを備えた、まさにゲームチェンジャーです。カスタムテーマを迅速に作成するのに役立ち、すべてをゼロからコーディングする必要があった場合よりもはるかに時間がかかったでしょう。将来に向けて、AI搭載のデザインツールをWordPressに統合する可能性に興奮しています。このプラットフォームが革新を続け、あらゆるレベルのユーザーにとってより簡単で強力になっているのは驚くべきことです。
モイヌディン・ワヒード
これまではWordPress市場でページ構築の話題がありましたが、コーディング知識がなくてもカスタムテーマ開発という形でさらなる進化を遂げています。 WordPressとその熱心な開発者コミュニティに感謝します。日々素晴らしいものにしています。 SeedProdは非常に強力です。その機能を学び、私のウェブサイトに実装しています。
Satish
wpbeginnerはどのようにホームページをデザインしましたか？
WPBeginnerサポート
We created a theme for ourselves
管理者
Fahad
これらのテーマを販売できますか？
WPBeginnerサポート
テーマを販売したい場合は、この方法を使用するのではなく、手動でテーマをコーディングすることになります。
管理者
Flox
投稿ありがとうございます。サイト作成にとても役立ちます。ありがとうございます…
WPBeginnerサポート
You’re welcome, glad our article was helpful
管理者
Hosli
こんにちは、チーム。 これを使ってランディングページを作成できますか？
WPBeginnerサポート
現時点ではBeaver Themerは必要ありませんが、ランディングページを作成するためにBeaver Builderを使用できます。
管理者
アイリーン
チュートリアルありがとうございます。簡単な質問です。Beaver で新しいカスタムテーマを構築した後、サイドバーを再追加することはできますか？もしそうなら、どのようにすればよいですか？お願いします。
WPBeginnerサポート
サイドバーを元に戻すには、カスタマイザーに戻る必要があります
管理者
ルイーズ・フィンレイ
Beaver Builderだけを使用するよりもBeaver Themerを使用する利点は何ですか？
WPBeginnerサポート
編集するものによって異なります。Beaver Builderはコンテンツエリアの編集用で、Beaver Themerはコンテンツエリア以外の場所用です。
管理者
キャシー・スミス
テーマを作成したら、Beaver Builder を必要とせずに他のウェブサイトで使用できますか？
WPBeginnerサポート
現時点では、他のサイトでも機能するにはBeaver Builderが必要になります。
管理者
Athena
初心者的な質問です。。現在Astraテーマを使用していますが、ページやウィジェットなどの既存のコンテンツはどうなりますか？それとも、まずWordPress内に別のウェブサイトを構築してから、それを移行する方法があるのでしょうか？
ありがとうございます
WPBeginnerサポート
Your posts and pages would remain, you would normally need to readd the widgets for the new widget areas
管理者
Vince
Beaver Builderは試したことがありませんが、Diviのように機能しますか？似ていますか？もしそうなら、これまでのところ、どんな種類のテーマであっても、コーディングが0%のテーマは見つかりませんでした。
はい、コーディングなしでページやテーマを構築することは可能です。しかし、通常、テーマにはないがクライアントがサイトに必要とする機能があり、そのためコーディングが必要になる場合があります。
WPBeginnerサポート
If you visit the Beaver Builder site there is the option for you to try the live demo to see how it works
管理者
Sayed Ezhar
素晴らしい！試してみます。ありがとうございます。
WPBeginnerサポート
You’re welcome
管理者
Zulqar
こんにちは。 私はWP Beginnerサイトの初心者でファンです。コードは全く分からないので、この記事は私にとって目から鱗でした！
簡単な質問です。Generate Pressを理解しようとしています。レイアウトをいじったりボタンを作成したりするには、コーディングを学ぶ必要があるように思えます。何かアドバイスはありますか？
WP Beginnerコミュニティにご協力いただきありがとうございます！ 敬具。
WPBeginnerサポート
Generate Pressのサイトに行くと、プラグインの開始点として役立つドキュメントページがあります。
管理者
kat
現在、Adobe Museを使用して複数のクライアントのウェブサイトを構築しています。なぜなら、高速で簡単で、WYSIWYGだからです。
しかし、AdobeはMuseを終了しました。すべてのクライアントサイトを別のソフトウェアに移行する必要があります。私のホスティングにはC-panelがあるので、WordPressアプリを取得してドメインに公開できます。
このプロセスで、顧客が望む既存のデザインを再作成できますか？また、これを使用してサイトはどの程度複雑にできますか？
私はWordPressで遊びますが、WPでは働きません。
WPBeginnerサポート
You would want to reach out to Beaver Builder’s support for specifics on the design depending you your needs
管理者
Mohamed Hassan
素晴らしい情報ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
Sy
素晴らしい投稿です！ありがとうございます。
WPBeginner はなぜいつも Elementor を避けているように見えるのですか？
Elementorでテーマを構築することは、Beaver Builderで構築することと非常によく似ていますが、Elementorの方が速く、スタイリングや要素/モジュールに関してより多くのオプションがあります。
コンテンツ、気に入りました！
WPBeginnerサポート
Elementor proがGPLに準拠していないことは、ユーザーのユースケースによっては推奨する上での大きな懸念事項の1つです。
管理者
Monique
素晴らしいチュートリアルです。まさに必要としていたものです。ありがとうございます！
WPBeginnerサポート
You’re welcome
管理者
Captaiing
ありがとうございます。試してみます。
WPBeginnerサポート
We hope our article makes it easier for you
管理者
Muhammad Waqar
このプラグインについて教えていただきありがとうございます。とても参考になりました。このウェブサイトも非常に役立ちます。重ねてお礼申し上げます。
WPBeginnerサポート
Glad our article could help
管理者
sajid
共有ありがとうございます。非常に参考になりました。
WPBeginnerサポート
You’re welcome
管理者
ルイーズ・フィンレイ
WordPress.comからセルフホスト版にサイトを移行し、Diviを使ってオーバーホールするプロジェクトを引き受けることを検討しています。
ベスト WordPress ページビルダーに関する記事を読んだのですが、Beaver Builder と Divi のどちらをお勧めしますか？
Diviでは、ElegantThemesからさまざまなテーマとプラグインを入手できますが、テーマロックインや制限が厳しすぎるという否定的なレビューを読みました。それに個人的な経験はありますか？
Beaver Builderでは、ページビルダー機能は申し分ないように思えますが、複数のページにオプションが分散しているためより複雑に思え、サブスクリプションにテーマやプラグインは付属していません。
編集スタッフ
どちらも優れた選択肢であり、トップ5に入っています。
Divi Page Builderプラグインは他のテーマでも動作するため、ElegantThemesにロックされることはありません。ただし、どのテーマでもそうですが、あるテーマから別のテーマに切り替えると、特定の機能が失われる可能性があります。だからこそ、新しいテーマが同等の機能セットを持っていることを確認する必要があるのです。
Divi Page Builder プラグインを使用している限り、ドラッグ＆amp;ドロップ機能はそのまま維持されます。
Diviの利点は、ElegantThemesが提供する追加のテーマ/レイアウトです。しかし、Beaver Builderの利点は、高度なカスタマイズオプションです。
管理者
リチャード・ロス
さらに、Beaver Builderはコンテンツエリアを埋めるためにショートコードを使用しないという事実も挙げられます。
クリス・ニーアス
Is not using short codes to populate content is a good thing? Be gentle, I’m a newbie
Rob Dewing
@Chris Nieass、はい、ショートコードを使用しないのはBeaverの大きな利点です。最高のインストールでも、時折DiviやBeaverのようなページビルダーが壊れることがあります。Diviが壊れると、ページ全体にショートコードがそのまま表示され、見た目が非常に悪くなります。もしBeaverで同じことが起こった場合、コンテンツはブロックのシリーズとして積み重ねられ、読みやすい形で表示されるだけで、きれいな列にはなりません。
Diviは、使いやすくカラフルなインターフェースと、友達全員が使っているという事実を気に入っているデザイナー向けです。Beaverは、サイトのパフォーマンス、より深いカスタマイズの容易さなどを気にする人向けです。