カスタムWordPressテーマを作成したいですか？コーディングなしで美しいものを作成できますか？WordPressウェブサイトのテーマを完全に制御することは、売上を増やし、ブランドでプロフェッショナルな体験を提供する素晴らしい方法です。
この記事では、テーマを完全に制御する方法を説明します。初心者でも、見た目を良くすることができます。あなたが望むように。カスタムコードを書いたり、高価なデザイナーや開発者を雇ったりする必要はありません。
始めましょう！
注：この記事はWordPress.orgサイトで作業するためのものであり、WordPress.comサイト用ではありません。違いを説明する記事はこちらをクリックしてください。
WordPressテーマとは？
すべてのWordPressサイトはテーマを使用しています。テーマはウェブサイトのテンプレート、または見た目、あるいは全体的なデザインです。テーマはウェブサイトのフロントエンドの機能と外観を制御します。それらはPHP、CSS、Javascript、およびHTMLテンプレートファイルのコレクションです。
WordPressサイトには複数のテーマをインストールできますが、アクティブにしてウェブサイトのフロントエンドに表示できるのは1つだけです。テーマはwp-contentフォルダに保存されます。
WordPressをインストールすると、WordPressコアチームによって作成された標準テーマが付属します。彼らは、その年の名前（Twenty Twenty Two、Twenty Nineteenなど）を付けています。
Easy Digital Downloads (EDD) は、デジタルストアを構築するために使用できる2つの無料カスタムWordPressテーマを提供しています。ThemeddとVenddです。また、他のデザイナー/開発者からの無料および有料テーマのリストも提供しています。
テーマをカスタマイズする際の課題
WordPressテーマに関する1つの中心的な課題は、作成またはカスタマイズが難しい場合があることです。少なくともWordPress、HTML、CSSコーディングの経験または知識が必要です。
WordPressテーマの開発またはカスタマイズを行うために学ぶ必要があることのいくつかを次に示します。
- コンテンツを読み込むためのPHPコードである「ループ」などのコーディング概念を理解する
- 独自のテーマディレクトリ内に子テーマを作成することにより、テンプレート階層を利用する。これにより、親テーマからコードを継承でき、ゼロから書く必要があるファイルの数（page.phpやsingle.phpなど）を制限できます。
- function.phpファイル、ウィジェットエリア、パーマリンクの使用法
- テーマファイルがコード行を使いすぎないようにしてください。コード行が多すぎると、サイトの読み込みが遅くなり、SEO（検索エンジン最適化）に悪影響を与える可能性があります。
- コードエディターを含む開発環境と、テスト用にローカルコンピューターで実行されているWebサイトをセットアップする
より簡単に作成するためのツール
WordPressは使いやすいことで知られています。特に他のすべてと比較して。インターネットの43％を支えているのには理由があります！
WordPressのエコシステムには、テーマのカスタマイズや作成における課題に対処するために開発された、いくつかのソリューションがあります。
1つのソリューションは、さまざまなマーケットプレイスで入手できる何千ものプレミアムテーマのいずれかを使用することです。希望通りの見た目や雰囲気を持つテーマを選択できます。
その他のソリューションについては、以下でご紹介します。👇🏽
コーディングなしでテーマをカスタマイズまたは作成する方法
WordPressテーマをカスタマイズまたは作成するための4つのソリューションを紹介します。中には、コードなしでゼロから独自のテーマを構築できるものもあります！
SeedProdテーマビルダー
（コードなしで）独自のウェブサイトテーマを構築する最良の方法は、SeedProdテーマビルダーを使用することです。
SeedProdはドラッグアンドドロップ式のWordPressビルダーです。100万人以上のウェブサイトプロフェッショナルが使用する強力なビジュアルデザインツールです。
使いやすく、カスタムランディングページやウェブサイト全体のテーマを作成できます！Gutenbergブロックエディターとも完全に連携します。
SeedProdは、Coming Soon、メンテナンスモード、または404ページの作成を簡単に行う方法として始まりました。継続的に更新および拡張され、ランディングページ、そして現在はフルテーマ構築に対応しています。
SeedProdの非常に人気があり強力な機能の1つは、テンプレートと既製のテーマの巨大なライブラリです。空白の状態から始めるのではなく、既製のものを利用して開始すると非常に役立ちます。そこから簡単にカスタマイズして構築できます。
⏭ SeedProd + EDDの使用方法を確認するには、ここをクリックしてスキップしてください
以下に、WordPressテーマをカスタマイズまたは構築するための他の3つのソリューションを示します。
カスタマイザー
多くのテーマが提供するソリューションの1つは「カスタマイザー」と呼ばれます。カスタマイザーを使用すると、コーディングなしでテーマの多くの視覚要素を制御できます。これらのカスタマイザーインターフェイスは非常に優れており、かなりの自由度を提供します。当社の無料テーマThemeddとVendidはカスタマイザーを提供しています。
多くのテーマには、カスタマイザーに「追加CSS」というボックスがあり、独自のCSSコードを使用してテーマの外観を手動で上書きできます。これを利用するには、簡単なコーディングスキルまたは多くのGoogle検索が必要です。
| 🟢 カスタマイザーの長所 | 🔴 カスタマイザーの短所 |
|---|---|
| カスタマイザーは非常に使いやすく強力です | 使用しているテーマのフレームワークとデザインコンセプトには、まだロックされています。 |
| テーマによってはカスタマイザーの使い方が他のテーマよりも優れている場合があります。追加CSSフィールドを使用してカスタムコーディングを行わないと、目的のコントロールが得られない場合があります。 |
ページビルダープラグイン
WordPress用のページビルダーを開発している会社はいくつかあります。これらは、ページを構築するためのビジュアルインターフェイスを提供します。中には、ヘッダー、フッター、サイドバー、およびページテンプレートを使用してテーマ全体をカスタマイズできるものもあります。
これらのページビルダーは、複雑なPHPファイル、CSSファイル、およびJavascriptを編集および制御しているため、ユーザーが行う必要はありません。
| 🟢 ページビルダーの長所 | 🔴 ページビルダーの短所 |
|---|---|
| 多くの力と制御が得られます | サイトが遅くなる場合があります |
| ビジュアルインターフェイス | 多くのページビルダーは高価ですが、無料プランがあるものもあります |
| 一部のページビルダーでは、テーマをインストールする必要があり、テーマとページビルダーの両方を扱うのは混乱することがあります |
フルサイト編集（FSE）
WordPressのフルサイト編集について、多くのことを耳にするかもしれません。FSEの初期バージョンは、WordPress 5.8および5.9で最近リリースされました。これは、コアチームによる新しいプロジェクトで、「ブロックエディター」ツールを使用してサイト全体を編集できるようにするものです。
WordPressのブロックエディター（Gutenberg）は数年前から存在します。投稿やページを作成するための、無料のページビルダーのようなビジュアルインターフェイスです。どのWordPressサイトにも無料で含まれています。
今、またはまもなく、同様のブロックエディターのような機能とインターフェイスでFSE統合テーマを編集できるようになります。これを使用して、メニュー、ヘッダー、フッター、サイドバー、ウィジェットなど、ページ上のあらゆる要素を制御できます。
これはエキサイティングです！サイトのテーマを制御する素晴らしい方法になるでしょう。執筆時点ではまだ本番稼働の準備ができていません。FSEはまだベータ版です。
| 🟢 FSEの長所 | 🔴 FSEの短所 |
|---|---|
| 特にGutenbergページビルダーを気に入って使用している場合、まもなく素晴らしい選択肢になるでしょう | 執筆時点では、まだベータテスト中です |
| 「フルサイト編集」対応のテーマが必要です。現在、これらはあまり利用できません |
SeedProd + EDDの簡単なウォークスルー
🎉 SeedProdを使用すると、コーディングなしで簡単に独自のウェブサイトテーマを作成できます。上記の欠点は一切ありません。
SeedProdで独自のWordPressテーマを簡単に作成する方法をご紹介します。Easy Digital Downloads（EDD）のeコマースプラグインを使用してデモンストレーションします。
何ができるか想像してみてください！顧客体験のあらゆる詳細を完全に制御できます。高価なデザイナーや開発者があなたのサイトで作業するのを、数週間、数ヶ月も待つ必要はありません。
あなたは顧客とあなたのストアを最もよく知っています！そして、誰よりもあなたのサイトを大切に思っています。SeedProdは、素晴らしい結果を迅速に得るための優れた選択肢です！
以下を行うだけです：
SeedProdをインストールして有効化する
まずSeedProdを購入する必要があります。テーマビルダーオプションには、ProまたはEliteライセンスが必要です。
🤚🏾SeedProdの初回限定価格50％オフはこちらをクリック
SeedProd ProまたはEliteを購入したら、他のプラグインと同様にインストールします。プラグインのインストールが初めての場合は、こちらに優れたチュートリアルがあります。
SeedProdプラグインがインストールされたら、ライセンスキーを入力してください。
これで、独自の新しいテーマを作成する準備が整いました！
また、まだインストールしていない場合は、Easy Digital Downloads をインストールしてください。
EDD は無料で利用でき、以下が含まれます：
- ショッピングカート
- 商品/ダウンロードのリスト表示
- 保護された商品ファイル。支払い済みの顧客のみが自動期限切れリンクにアクセスできます。
- 柔軟なチェックアウトオプション
- 割引コード
- 顧客管理（基本CRM）
- eコマースレポート
- Stripe および/または PayPal 連携
EDD パス
EDD パス を取得して、メール統合、サブスクリプション、ソフトウェアライセンス、Amazon S3/DropBox 統合などの高度な e コマース機能を追加してください。
ワンクリックでテーマを作成！
WordPress 管理画面の左側にある SeedProd を探します。テーマビルダーをクリックします。
次に、テーマというオレンジ色のボタンをクリックします。これにより、選択できる既製のテーマが表示されます。以下の例では、スターターの既製テーマを使用します。
スターターの既製テーマをクリックすると、SeedProd は単一ページ、ホームページ、ヘッダー、フッター、サイドバーなどの各テーマテンプレートパーツを作成します。
ワンクリックでテーマ全体を作成しました！
footer.php、header.php、sidebar.php、archive.php、またはスタイルシートを作成する必要はありませんでした。すべて完了しています。
右上にある SeedProd テーマを有効にする トグルボタンをクリックしてテーマを有効にしてください。これにより、現在のテーマが無効になります。一般公開する準備ができていることを確認するか、ステージングサーバーでこれを試してください。
注意: SeedProd を使用する場合、WordPress のテーマシステムは使用しなくなります。wp-content/themes 内のテーマフォルダーにテーマ名を持つ新しいテーマは表示されません。代わりに、SeedProd WordPress プラグインがサイトの外観を制御しています。
基本的なカスタマイズ
すぐに実行できるカスタマイズがいくつかあります。ロゴ、基本的な色、スタイルをカスタマイズします。
ロゴをカスタマイズする
最初のステップとして、ロゴを追加します。これは、ヘッダーテンプレートを編集することで行います。
全体的なスタイルをカスタマイズ
次に、グローバルなスタイル設定をすばやく編集できます。グローバル CSS テンプレートをクリックします。
ここでは、フォント、見出し、リンク (href)、色、サイズなど、サイトの多くの視覚設定を変更できます。これにより、CSS を知ったり、style.css ファイルをカスタマイズしたりする必要がなくなります。
ダウンロード用のカスタムテンプレートを作成する
Easy Digital Downloads で販売する商品は、WordPress サイトのダウンロードと呼ばれるカスタム投稿タイプとして保存されます。
ダウンロードは、単一投稿またはアーカイブページとして表示されます。
- 単一投稿とは、ダウンロードが独自のページに単独で表示される場合です。
- アーカイブページ (WordPress 用語) とは、複数のダウンロードのリストです。
最初から始める必要はありません。新しいテンプレートを追加する代わりに、SeedProd が作成したこれらの 2 つのテンプレートを複製するだけです。
- ブログインデックス、アーカイブ、検索、および
- 単一投稿
これらのテンプレートに「EDD Single Download」と「EDD Download List」というタイトルを付けて、他のテンプレートと混同しないようにしてください。
ダウンロードテンプレートの条件を編集する
これらのページにはダウンロードのみを読み込むように設定する必要があります。簡単です。タイトルの下にある「条件を編集」というテキストボタンをクリックするだけです。
EDD Single Download テンプレートの場合は、次のように設定します。
- 優先度 10
- 含める: ダウンロード投稿タイプ
EDD Download List では、次の設定を使用します。
- 優先度 30
- 含める: 投稿タイプアーカイブ、次に「download」と入力
注: これらの優先度設定は、2つの類似した条件がある場合に、他の条件によって上書きされないように設計されています。 優先度と条件の詳細についてはこちらをご覧ください。
ダウンロードページのカスタマイズ
EDDダウンロード用の個別のテンプレートを作成したので、好きなようにカスタマイズできます。
私の例では、クリーンでシンプルなEDDダウンロードページを作成しました。コンバージョンを増やすために、サイドバーなどを何も付けずに、中央揃えのシングルカラムにしました。
バックエンドでSeedProdで編集している様子はこちらです。
そして、フロントエンドでの表示はこちらです。
このサンプルEDDダウンロードリストページでは、2カラムのグリッドを採用しました。好きなようにできます。新しいことを試してプレビューするのが驚くほど簡単です。
SeedProdで編集しているバックエンドにて：
フロントエンドでの表示はこちらです：
もっと多くのことができます。空が限界です！
あるいは、宇宙が限界かもしれません。上記のサンプルは、SeedProdでできることのほんの一部です。
完全なコントロールと無限の実験で何ができるか想像してみてください。
SeedProdには、何百ものテンプレートブロックとページテンプレートが付属しています。
私たちのようなデジタルクリエイターにとって特に興味深いかもしれない例をいくつかご紹介します！
- 価格表
- アニメーション見出し
- 複数カラムレイアウト（モバイル用のレスポンシブ設定付き）
- お問い合わせフォーム
- プレゼント（RafflePressを使用）
- オプトインフォーム
- ソーシャルシェア
- 画像カルーセル
- アコーディオン
- Facebook; いいね、コメント、ページ、または埋め込み
- Twitter; 埋め込み、タイムライン、ツイートボタン、フォローボタン
- 昔ながらのショートコード
SeedProdは、EDDストアのテーマをセットアップするのに最適な方法です。新しく始める場合でも、顧客を感動させる新しいものを試したい場合でも、優れた選択肢です。
結論
素晴らしい！コーディングなしでテーマを美しく見せる方法を学びました。すべてを自分でカスタマイズできるなら、顧客体験を向上させるために何ができるかを想像してみてください。
デジタルクリエイターや起業家向けのさらに多くのリソースがあります。次に何を学びたいですか？
WordPressやデジタル製品の販売について、さらに詳しく知るには、FacebookとTwitterでフォローしてください。
