シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

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

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

執筆者 著者アバター ステイシー・コリン
著者アバター ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー レビュアーアバター ターナー・ジョン
レビュアーアバター ターナー・ジョン
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

思い描いた通りのカスタムWordPressテーマを作りたいですか?このガイドでは、コードに触れることなく、すべてのページ、色、レイアウトをデザインするために私が使った正確なプロセスをご紹介します。

初めてWordPressでサイトを立ち上げたとき、既成のテーマを使いましたが、何度も障害にぶつかりました。セクションを好きな場所に移動させることができず、ブランドカラーが正しく表示されず、小さな変更に何時間もかかっていました。WordPressのカスタムテーマの作り方を学ぶことで、そのすべてが解決しました。

TL;DR:SeedProdのドラッグアンドドロップテーマビルダーを使えば、コーディングなしでカスタムWordPressテーマを作成できます。テンプレートを選択し、サイトのあらゆる部分を視覚的にカスタマイズし、数回クリックするだけでテーマを公開できます。

カスタムWordPressテーマの最も簡単な構築方法:

WordPressのウェブサイトを構成するページとは?
WordPressのウェブサイトには通常、トップページ(メインページ)、会社概要ページ(あなたやあなたのビジネスに関する情報)、サービスや商品のページ、ブログ(記事やニュース)、連絡先ページ(あなたへの連絡方法)があります。また、FAQやポートフォリオページがあるサイトもあります。

カスタムWordPressテーマとは?

カスタムWordPressテーマとは、レイアウトやスタイルが設定された既成のテーマを使用するのではなく、あなたのニーズにぴったり合うように作成するウェブサイトデザインのことです。カスタムテーマでは、ヘッダーやフッターからブログのレイアウトやボタンのスタイルに至るまで、サイトのあらゆる部分の見た目や動作を選択することができます。

従来、テーマを作成するにはPHP、CSS、HTMLを記述する必要がありました。現在では ビジュアルテーマビルダーのようなビジュアルテーマビルダーを使えば、コードに触れることなく、完全にカスタム化されたWordPressテーマを作成することができます。セクションをドラッグ&ドロップしてサイトの各部分をデザインし、色やフォントを変更し、すべてをライブでプレビューすることができます。

つまり、他人のデザインに微調整を加える必要はないのです。あなたのブランドにマッチし、読み込みが速く、訪問者が望む体験を正確に得られるテーマを作ることができるのです。

なぜカスタムWordPressテーマを作るのか?

最初の頃は、人気のあるテーマを選べば時間の節約になると思っていた。週間くらいはそうだった。それから壁にぶつかった。セクションを好きな場所に移動させることができず、フォントも違和感があり、変更するたびにわかりにくい設定を掘り下げることになった。

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

そこで、コードを書かずに自分のテーマをデザインする方法を探し始めたんだ。そこで見つけたのが SeedProdビジュアルなWordPressテーマビルダーで、ドラッグ&ドロップでサイトのあらゆる部分を作成できる。PHPファイルも、CSSの編集も、適切なメニューを探すこともない。

SeedProdを使えば、それができる:

  • 最初から私のブランドに合わせる。色、フォント、スペーシングなど、私が思い描いたとおりに。
  • 肥大化した部分をカット。実際に必要なレイアウトと機能だけを搭載することで、サイトの読み込みが速くなりました。
  • 数分で変更。コードに触れることなく、レイアウトの微調整、画像の入れ替え、セクション全体のデザインを変更できます。
  • 訪問者を中心にサイトを計画する。他人の構造に無理やりコンテンツを押し込むのではなく、理にかなった順序でページを作る。

SeedProdのテーマが、既成のものと格闘するのではなく、自分自身のSeedProdのテーマで作業することがいかにスムーズであるかを知ったら、もう元には戻れないと思った。

カスタムWordPressテーマを作成する前にすべきこととは?

SeedProdでWordPressテーマを作成する前に、セーフティネットがあることを確認してください。すでに既存のウェブサイトがあり、コンテンツを保持したい場合は、念のためWordPressのインストールのバックアップを作成しておく必要があります。

ライブサイトでのテーマ開発の失敗を避けるために、ステージングサイトも作成する必要があります。これにより、ライブサイトに影響を与えることなく、SeedProdを試してテーマを構築するための独立したプライベートな環境が得られます。

重要:まだウェブサイトをお持ちでない場合は、SeedProdを使用する前にウェブサイトを作成する必要があります。ここでは、初心者のためのWordPressウェブサイトの作成方法について説明します。

コードなしでWordPressテーマを作るには?

僕がコードの書き方を知らないと言ったのを覚えているかい?まあ、それは全く問題ではありませんでした。SeedProdは、ビジュアルステップごとに、信じられないほど簡単にカスタムテーマを構築することができました。私がやった方法はこうだ。

ステップ1.SeedProdのインストールとテンプレートの選択

まず、SeedProd Proプランをご利用ください。これは、手頃な価格で必要なすべての機能(テーマビルダーを含む)を提供します。

インストールが完了したら、スターターキットからカスタムWordPressテーマを作成し、あなたのサイトに合わせてカスタマイズする準備が整います。

SeedProdライセンスキーの検索

ライセンスキーを入手したら、ステージングサイトに移動し、プラグインをインストールしてください。SeedProdのインストールは、プラグインファイルをアップロードし、"Activate "をクリックするだけです。

SeedProdプラグインを有効にする

プラグインをアクティブにした状態で、WordPressダッシュボードのSeedProdメニューに行き、"Theme Builder "をクリックします。次に、"Theme Template Kits "ボタンをクリックして、スターターテーマを選択します。

SeedProdテーマテンプレートキット

SeedProdには、プロフェッショナルにデザインされたブロックテーマ・テンプレートがたくさんあり、正直言って、私でさえ選択に少し迷いました。

SeedProdのテンプレートは、カテゴリーで絞り込んだり、人気順や新着順で並べ替えることができます。後ですべてをカスタマイズするので、あなたのスタイルに最も近いものを選んでください。

完璧でなくても心配しないでください。次のステップで隅々までカスタマイズできます。

SeedProdテーマテンプレートキットの選択

最終的にエリートコンサルティングビジネステーマに決めました。そのクリーンでモダンな外観は、私が目指していた雰囲気と完璧にマッチしていました。

テーマファイルをインポートするには、テーマキットにマウスカーソルを合わせ、チェックマークアイコンをクリックします。

SeedProdテンプレートキットのインポート

このデザインのために選んだテンプレートをプレビューするにはここをクリックしてください。

キットを選ぶと、WordPressテーマを構成する個々のテンプレートをすべて見ることができる。私のは、例えばホームページ、ヘッダー、フッター、ブログページ、サイドバーが含まれていた。

SeedProdテーマパーツ

また、アワード・セクション、サービス・ページ、価格表、製品用カスタム・ページ・テンプレートなど、明確なテーマ・セクション用のカスタム・テンプレートも備えていた。

あなたのサイトにこれらすべてが 必要なわけではありません。ですから、必要なものに集中し、不要なテンプレートは "ゴミ箱 "をクリックして削除してください。

もしこれに抵抗がある場合は、いつでも「公開」トグルをオフにして、テンプレートがウェブサイトに表示されないようにすることができます。

SeedProdでテーマテンプレートをアンパブリッシュする

テーマの基本的な構成要素が揃ったところで、各テーマセクションの編集を始めることができる。私のサイトでは、ヘッダーとフッターのセクションから始めました。

テーマのセクションを編集するには、そのセクションにカーソルを合わせて「デザインを編集」リンクをクリックするだけです。

SeedProdヘッダーテンプレートを編集する

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

オリジナルのヘッダー・テンプレートは3カラム・レイアウトで、私の好みからするとちょっと忙しすぎた。この場合は、それを削除して、左側のパネルから2カラムのレイアウト・ブロックをドラッグするだけでいい。

WordPressテーマのヘッダーに新しいカラムを追加する

メディアライブラリからロゴを選択し、ポイント&クリックコントロールでサイズや配置を調整するだけです。

WordPressテーマのヘッダーにカスタムロゴを追加する

また、自分のデザイン決定を再確認する良い機会でもあります。テーマをカスタマイズする際に初心者が犯しがちなWordPressのデザイン上のミスを挙げてみましょう。

ナビゲーションメニューには、SeedProdのNav Menuブロックを使用し、"Simple Menu "設定を選択することができます。これにより、あなたが考えている通りのメニュー構造を簡単に作成することができます。

カスタムWordPressテーマにカスタムナビゲーションメニューを追加する

ヘッダーが完成したら、変更を保存します。次に、テーマビルダーに戻り、フッターテンプレートを開いてフッターセクションをカスタマイズします。

WordPressテーマのフッターテンプレートを編集する

私のテンプレートのオリジナルのフッターには必要以上の情報があったので、不要なブロックを削除してシンプルにした。

SeedProdでWordPressテーマのフッターテンプレートを編集する
オリジナルのフッターテンプレートの例

会社情報とソーシャルメディアのメニュー項目はそのままに、よりバランスの取れた見た目にするために中央揃えにした。そして、プレースホルダーのコンテンツを私自身のものに入れ替えただけです。

WordPressフッターのカスタマイズ
カスタマイズされたWordPressフッターテンプレート

フッターテンプレートにも同様の変更を加え、カスタムテーマに必要な外観を実現しましょう。

ヘッダーとフッターがスマートでスタイリッシュに見えたら、次はウェブサイトの心臓部であるホームページに取り組みましょう。テンプレートファイルはSeedProd " Theme Builderの下にあります。

WordPressのホームページテンプレートを編集する

ステップ3.カスタムWordPressホームページを作成する

WordPressのテーマを視覚的に構築する方法を疑問に思ったことがあるなら、このパートを読めば、それがいかに簡単かがわかるだろう。

ホームページをカスタマイズする際の主な目的は、強い第一印象を与え、あなたの専門知識を示し、潜在的なクライアントや顧客にあなたやあなたのビジネスを選ぶ説得力のある理由を提供することでしょう。

個人的には、エリートコンサルティングビジネステーマのホームページの全体的なレイアウトが好きでしたが、さらにシンプルにして、私の個人的なタッチを加えたいと思いました。

WordPressテーマのホームページテンプレートをカスタマイズする
オリジナルWordPressホームページテンプレートのデザイン例

トップにあるヒーローのセクションは、大胆な主張をするのに最適な方法なので、そのままにしました。デフォルトの画像を自分のブランドをよりよく反映したものに入れ替え、見出しと説明を更新しただけです。

カスタマイズされたWordPressテーマのホームページテンプレート
WordPressテーマのホームページをカスタマイズした例

同様に、CTAボタンのスタイリングも微調整した。これは、ブロックの詳細設定をクリックすることでできます。カラーピッカーにアクセスして、新しい背景色を選択し、ボタンの角を丸くしてソフトな外観にすることができます。

信頼を築き、自分の経験を誇示するために、私はこうした:

  • 一緒に仕事をしたブランドのロゴストリップを追加した、
  • 数値カウンターを更新し、主要な統計を強調
  • お客様の声を集めたカルーセルを構築
  • 画像と見出しブロックを使ったミニ・ライティング・ポートフォリオを収録
カスタムWordPressテーマの証言セクション

数回のクリックとドラッグで、あなたのホームページは思い通りの姿になる。

ステップ4.ブログページとシングルポストテンプレートを作成する

さて、私は 自分のウェブサイトにブログを持つつもりはなかったので、実際にはこのステップは必要ありませんでした。しかし、自分の考えや専門知識を世界と共有したいと思う人は多いと思うので、SeedProdがどのように魅力的なブログページや単一の投稿テンプレートを簡単に作成できるかを簡単に紹介しよう。

ブログページテンプレート

ブログページのテンプレートは、テーマのテンプレートリストの "ブログのインデックス、アーカイブ、検索"、または私の場合は "ブログページ "で見つけることができます。前のカスタムページテンプレートと同様に、"デザインを編集 "リンクをクリックしてカスタマイズすることができます。

カスタマイズWordPressテーマブログページテンプレート

ここでは、ブログ記事の表示方法をカスタマイズすることができます - 特集画像、抜粋、著者情報などの表示を選択できます。

カスタムWordPressテーマのブログページテンプレートをカスタマイズする

また、検索バー、ソーシャルメディア共有ボタン、あるいは行動喚起のような要素を追加して、訪問者がさらに探索するよう促すこともできる。

シングル・ポスト・テンプレート

ブログカスタムページテンプレートのように、ブログ記事テンプレートも編集・カスタマイズすることができます。

単一記事テンプレートの編集 WordPress

一貫した外観のために、SeedProdでは、投稿タイトル、特集画像、メタディスクリプション、さらには著者の経歴などの要素の表示をスタイル設定することができます。

これらはWordPressではテンプレートタグと呼ばれています。手動で作成しなくても、自動的にあなたのサイトからデータを取り込んでくれる。

WordPressテーマ単一記事テンプレートのカスタマイズ

例えば、Featured Imageテンプレートタグを使えば、ブログの単一ページに特集画像を自動的に表示することができます。

ステップ5.会社概要ページを作成する

ホームページの次に重要なのは、会社概要のページである。潜在的な顧客や協力者が、サービスの背後にいる人物を知る場所だからだ。私は、私自身が本物であり、魅力的であり、私が誰であり、何を提供しているのかが明確にわかるようにしたいと思いました。

エリートコンサルティングビジネステーマには、アバウトページ用の基本的なWordPressカスタムページテンプレートがすでに含まれており、WordPressダッシュボードのページ " すべてのページを開き、"SeedProdで編集 "をクリックすることでアクセスできました。

SeedProdでアバウトページを編集する

オリジナルのデザインの最初の2つのセクションは、私の仕事経験と提供するサービスに焦点を当てたもので、そのまま残すことにしました。ただ、プレースホルダーのコンテンツと画像を私自身のものに入れ替えただけです。

WordPressテーマのaboutページをカスタマイズする

次に、信頼性を高めるために、資格をアピールしたいと思いました。そこでSeedProdのテンプレート・パーツが役に立ちました。

テンプレート・パーツとは、ウェブサイトのさまざまなページに挿入して再利用できる、あらかじめ用意されたセクションのことです。このテーマには、"受賞と表彰 "というテンプレートパーツが付属しています。

カスタムWordPressテーマテンプレート部分

私はこのテンプレートを編集して、私の証明書を追加し、簡単に私の "About "ページに挿入しました。

カスタマイズされたWordPressテーマテンプレート部分
カスタムテンプレート部分のカスタマイズ例

最後に、より個人的なタッチのセクションを作りました。私の趣味や住んでいる場所など、訪問者がより個人的なレベルで私とつながることができるような小ネタを紹介した。

カスタムWordPressテーマについてのページセクション

これらのカスタマイズは、開発者を必要とせずに自分自身のWordPressテーマをデザインするのに役立った。

ステップ6.連絡先ページを設定する

私が一番避けたかったのは、ごちゃごちゃして分かりにくいお問い合わせページでした。エリートコンサルティングビジネステーマには、事前に構築されたお問い合わせページが付属していますが、それは少し圧倒的に感じました。

WordPressテーマお問い合わせページのデザイン
オリジナルのお問い合わせページのデザイン

私は物事を大幅に単純化することに決めました。デフォルトのコンテンツのほとんどを削除し、SeedProd の Contact Form ブロックに置き換えました。このブロックは最も人気のある WordPress フォームビルダープラグインの一つであるWPForms と非常に簡単に統合できます。

お問い合わせフォームを備えたWordPressのお問い合わせページ
カスタム・コンタクト・フォームを備えた、私のコンタクト・ページのデザイン変更

簡単なメモ:WPFormsはSeedProdにバンドルされていませんが、WordPressのプラグインディレクトリからWPFormsの無料版をダウンロードすることができます。

WPFormsをインストールすることで、SeedProd内で直接お問い合わせフォームを作成することができます - 複雑な設定やショートコードをいじる必要はありません。

ステップ7.グローバルテーマ設定を調整する

私のウェブサイトは本当にまとまり始めていた。いよいよ、洗練されたプロフェッショナルなサイトにするための最後の仕上げをする時が来た。SeedProdのグローバル設定に入ります。

グローバルCSSテンプレートはテーマテンプレートのリストにあります。これは、あなたのウェブサイトの全体的なルック&フィールを制御するためのコマンドセンターです。

グローバルCSSテンプレート

カラー

まず、すべてのページで色の一貫性を確保したいと思うでしょう。SeedProdでは、ヘッダーやテキストからボタン、リンク、背景まで、あらゆるもののグローバルカラーを定義できるため、これを簡単に行うことができます。

カスタムWordPressテーマカラー

フォント&タイポグラフィ

Elite Consulting Businessテーマのデフォルトのフォントは気に入っていたが、見出しやリンクのフォントのウェイトや色を微調整して、私のブランド美学によりマッチさせたかった。

WordPressテーマのカスタムフォント

背景

一貫性を保つために、ページ全体の背景色を変えました。SeedProdでは背景画像を追加することもできます

ボタン

ボタンは行動喚起のために重要なので、目立つようにしましょう。フォントスタイル、色、境界線の半径を変えて、しっくりくる外観が見つかるまで遊んでみましょう。

WordPressテーマのカスタムボタン設定

カスタムCSS

SeedProdには、独自のカスタムCSSを追加するオプションもあります。これは少し専門的になりますが、あなたのデザインをさらにコントロールすることができます。

WordPressテーマのカスタムCSSオプション

例えば、WPFormsのフォーム送信ボタンを他のボタンと同じスタイルにするために、カスタムCSSのスニペットを使った。

もしよろしければ、WordPressでカスタムCSSを追加する方法についてのガイドをご覧ください。

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

カスタムWordPressテーマのデザインに細心の注意を払った後は、最終チェックを省略しないでください。内蔵のプレビュー機能を使って、デスクトップからタブレット、スマートフォンまで、さまざまな画面サイズでどのように見えるかを再チェックしましょう。

カスタムWordPressテーマをモバイルでプレビュー

あなたのテーマが、人々がどのように見ていたとしても、素晴らしいものに見えるようにしたいはずだ。

もちろん、インタラクティブな要素もテストすべきです。コンタクトフォームからテストメッセージを送信してください(そして、それがあなたの受信トレイに届いたとき、小さな勝利のダンスを踊ってください!🎉)。

カスタムWordPressテーマ機能のテスト

私はすべてのボタンとメニューのリンクをクリックした。

いよいよ正念場です。SeedProdテーマビルダーに戻り、深呼吸をして、右上にある「SeedProdテーマを有効にする」のトグルを見つけてください。ワンクリックで「オン」に切り替えてください。

カスタムWordPressテーマを有効にする

カスタムWordPressテーマが完成しました!あなたのサイトを訪問して、実際に動作しているのを見ることができます。

カスタムWordPressテーマデザイン。

カスタムWordPressテーマを作成する他の方法(SeedProdなし)

さて、このガイドを読んでいるすべての人が、私のカスタムテンプレートやテーマの作成プロセスに従いたがるわけではないことは理解している。このことを念頭に置いて、プロフェッショナルなウェブサイト・デザインを構築する他の方法をいくつか研究してみた。

方法難易度コーディング?最適
従来のコーディング上級あり(PHP、HTML、CSS、JS)デベロッパー、代理店
アンダースコア (_s)中級はい(PHP、CSS)テーマ開発を学ぶ開発者
子供のテーマ初級/中級いくつかのCSSワードプレス愛好家
ブロックテーマ中級いいえ最新のワードプレスユーザー

これらにはそれぞれ適材適所があるが、コーディングなしでWordPressテーマを作ろうとすると、やはり限界を感じることがある。子テーマはCSSの微調整が必要ですし、ブロックテーマは必ずしも初心者向けではありません。SeedProdは完全なビジュアルデザインコントロールで真のノーコード体験を提供するので、コードに触れることなく完全なカスタムテーマを作成できます。

もしあなたが、思い通りに見えるテーマを素早く柔軟に構築する方法を探しているなら、SeedProdは私がいつも戻ってくるオプションです。

実際のウェブサイトのためのカスタムWordPressテーマの例

カスタムテーマで何を作ればいいかわからない?ここでは、SeedProdのビジュアルビルダーといくつかの簡単な調整で構築された、あなたのニッチに最適なサイトをデザインするための実際の例を紹介します。

よくある質問

コーディングの経験がなくてもWordPressのカスタムテーマを作成できますか?
そう、SeedProdのようなツールを使えば、コーディングなしでカスタムWordPressテーマを作ることができる。これらのツールを使えば、ドラッグ&ドロップでサイトの外観をデザインできるので、コードを書く必要なくレイアウト、色、フォントを選ぶことができます。
SeedProdで作成したカスタムテーマをエクスポートするには?
SeedProdのインポート/エクスポート機能を使用すると、WordPressテーマを.zipファイルとしてエクスポートできます。このガイドに従って、SeedProdでWordPressテーマのテンプレートファイルをエクスポートし、別のWordPressインストールにインストールする方法を学んでください。
初心者に最適なWordPressテーマビルダー・プラグインは?
コーディングなしでカスタムWordPressテーマを作成したいなら、SeedProdが私の一押しだ。完全なWordPressテーマビルダーとして機能する、パワフルでありながら初心者に優しいプラグインだ。ドラッグ&ドロップでレイアウトを作成し、ビジュアルでスタイルを整え、開発者なしでデザインを公開することができる。
テーマとページビルダーの違いは何ですか?
WordPressのテーマはサイト全体のデザインをコントロールしますが、ページビルダーは個々のページのコンテンツエリアのみを変更します。
カスタムテーマを作るには開発者が必要ですか?
SeedProdのようなツールを使えば、コードに触れることなくテーマを構築し、立ち上げることができます。

あらゆるWordPressウェブサイトのカスタムテーマを作成する

適切なツールを使えば、誰でもカスタムWordPressテーマをデザインし、開発者を必要とせず、自分のビジョンにぴったり合ったサイトを構築することができます。個人ブログでも、ビジネスサイトでも、まったくユニークなサイトでも、その見た目と機能を完全にコントロールできるようになったのです。

さらに上を目指すなら、新しいカスタムテーマと相性の良い、さらに役立つガイドをいくつかご紹介しよう:

お読みいただきありがとうございました!質問がある場合、またはカスタムテーマを共有したい場合は、下にコメントをドロップします。また、YouTubeX(旧Twitter)FacebookでWordPressのヒントやチュートリアルをフォローしてください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。