更新日: 2022 / 06 / 06

Wordpress テーマの自作方法と難しい場合の対策

カテゴリー: wordpress

Wordpressテーマを自作するには自分でデザインやHTMLを用意してWordpress化する方法とベースとなるテーマからカスタマイズする方法があります。

このページではWordpressテーマを自作する方法と大まかな手順、自作が難しい場合の対処方法について解説します。

  1. Wordpressテーマ自作のメリットとデメリット

    1. テーマを自作するメリット
    2. テーマを自作するデメリット
  2. Wordpressテーマの自作に必要なスキルは?効率よく学ぶには?

    1. テーマ作成に必要なスキル
    2. 必要なスキルを効率よく学ぶ方法
  3. Wordpressテーマを自分で作る方法

  4. ベーステーマを使って少しずつカスタマイズする

    1. ベースにおすすめのテーマは?
    2. カスタマイズのやり方
  5. HTMLをWordpressテーマに置き換える

    1. HTMLをWordpressファイルに分割する
    2. データの読み込みが必要な部分をWordpressタグに置き換えていく
    3. functions.phpにサイドバーやCSSファイルの読み込みなどを追加する
  6. テーマの自作が難しいときの対処法

    1. ノーコードツールのElementorを使う
    2. 有料テーマを使う
  7. Wordpressテーマ自作のおさらい

Wordpressテーマ自作のメリットとデメリット

Wordpressテーマの自作はプログラミングの勉強も必要なので少し難易度が高め。

記事の最後の方に自作が難しい場合の対処法を紹介していますが、まずはWordpressテーマを自作するメリットとデメリットをまとめてみました。

テーマを自作するメリット

テーマを自作できるようになると以下のようなメリットがあります。

  • 自分で自由にホームページを作れる
  • 仕事にできる
  • 副業で稼げる

最も大きなメリットは自分で自由にホームページをカスタマイズできるようになることです。

またWordpressをカスタマイズできるようになればクラウドソーシングなどで収入を得ることも可能になります。

クラウドワークス Wordpressテーマ自作のメリット

ちなみにWordpress構築案件だと30万〜60万円程度の報酬で発注されることも多いです。

テーマを自作するデメリット

テーマを自作する場合のデメリットとしては次のようなことが考えられます。

  • 勉強する必要がある
  • 時間がかかる
  • 結果的にうまくできる保証がない

思い通りにカスタマイズできるようになるためには勉強に時間がかかります。

また、時間をかけて勉強しても結果的に思い通りのことができないかもしれません。

Wordpressテーマの自作に必要なスキルは?効率よく学ぶには?

自作する場合に必要なスキルと効率よく学ぶための方法について紹介します。

勉強は必要ですが、やることが明確になっていて、効率よくやる方法がわかっていればかなり時間を短縮することができると思います。

テーマ作成に必要なスキル

テーマの自作に必要なスキルは次のようなものがあります。

  • PHP(プログラミング言語)
  • Wordpressの仕組みやWordpressタグ
  • HTMLとCSS

他にもWordpressでサイトを運用する場合はサーバーやデータベースの知識、セキュリティ、SEOなどについて知っておく必要があります。

必要なスキルを効率よく学ぶ方法

必要なスキルを効率よく学ぶためには実際に手を動かしながら学ぶのが一番早いです。

Wordpressの勉強方法としては次のような方法がおすすめです。

  • Youtubeの動画を見る
  • 本を買って勉強する
  • 学習サイトを使う

Youtubeの動画を見る

Youtube動画でWordpressの使い方がたくさん紹介されているので動画を見ながらテーマの作成方法を学ぶことができます。

テーマ自作に必要なスキルは?効率よく学ぶには? Youtubeを使う

本を買って勉強する

本で学ぶ場合は以下のようなテーマを作成できる入門書を選びましょう。Wordpressは更新のスピードが早いのでできるだけ新しいものがいいです。

学習サイトを使う

もう1つ見逃せないのが学習サイト。Wordpressの場合は有料の学習サイトがほとんどですが、Udemyだとセールやってることが多いので、高額なコースでも3000円程度で学べちゃったりします。

テーマ自作に必要なスキルは?効率よく学ぶには? 学習サイトを使う

コースがたくさんあってどれがいいか迷うときは以下のようなポイントをチェックしていれば大丈夫です。

  • レビュー数が多い
  • 評価が高い
  • 目的にあってる(テーマの作成を学べる)
  • 金額が高め
  • コンテンツ量が多い(動画は1時間より10時間以上の方がいい)

Wordpressテーマを自分で作る方法

Wordpressテーマを自分で作る方法は以下の2つの方法があります。

  • ベーステーマを使って少しずつカスタマイズする
  • HTMLをWordpressテーマに置き換える

すでに使うテーマが決まっている場合や、それほどオリジナリティを必要としない場合はテーマをベースにカスタマイズしていきます。

HTMLから作る場合は自分でデザイン〜コーディングまで行ったHTMLファイルをWordpressのファイルに変換していく作業を行います。

ベーステーマを使って少しずつカスタマイズする

ベーステーマを使ってカスタマイズする方法を紹介します。

この方法でテーマを作る場合、テーマ選びが重要です。

ベースにおすすめのテーマは?

勉強しながらやるなら高機能なテンプレはあまりおすすめできません。

理由としてはコードがかなり複雑なのでどこをどういじればいいのか分かりにくいからです。

ベーステーマにおすすめできるのはデフォルトテーマか、「Hello Elementor」のようなシンプルなテーマです。

ベースにおすすめのテーマは? Hello Elementor

カスタマイズのやり方

ベーステーマを使ってカスタマイズするには変更したい場所からいじっていきます。

カスタマイズの手順としては以下のような感じになります。

  • ページを見て変えたいところを探す
  • テーマのどのファイルに書かれているか探す
  • テーマファイルを編集、ページを更新してチェック

例えばロゴを変えたり、記事一覧にテーマにはない情報を表示させたり目的に合わせて部分的に編集していきます。

どのファイルに書かれているかを探すには、Devtoolsで変更したい箇所のHTMLタグのクラス名やID名を探し、コードエディターの検索機能でテーマファイル全体を取得したクラス名やID名で検索すればだいたいわかります。

ページを見て変えたいところを探す

Devtoolを開いて編集したい箇所のHTMLタグをチェック。ここでは「アーカイブ」をのHTMLタグを探すとクラス名がentry-titleでした。

ベーステーマを使って少しずつカスタマイズする カスタマイズのやり方1

テーマのどのファイルに書かれているか探す

コードエディターでentry-title探すと、template-parts/archive.phpに探していたものが見つかります。

ベーステーマを使って少しずつカスタマイズする カスタマイズのやり方2

テーマファイルを編集、ページを更新してチェック

このHTMLタグにtest-classを入れてみました。画面を更新して反映されるかチェックします。

ベーステーマを使って少しずつカスタマイズする カスタマイズのやり方2

この作業を繰り返して変更が必要な箇所をどんどんカスタマイズしていきます。

HTMLをWordpressテーマに置き換える

もう1つの方法としてはHTMLをWordpressテーマに置き換える方法があります。

こちらはWordpressタグやPHPの知識が必須なのでやや難易度が高めです。

大まかな手順は以下のようになります。

  • HTMLをWordpressファイルに分割する
  • データの読み込みが必要な部分をWordpressタグに置き換えていく
  • functions.phpにサイドバーやサムネイル表示などの機能を追加する

詳細について以下で解説します。

HTMLをWordpressファイルに分割する

まずは作成したHTMLファイルをWordpressのファイルに分割していきます。

トップページの場合は次のようになります。

WordpressファイルHTMLファイル
header.phpHTMLの宣言(一番上)からヘッダーの閉じタグまで
footer.phpフッターの開始タグからHTMLの閉じタグ(一番下)
index.phpヘッダー、フッターを除いた残りの部分

データの読み込みが必要な部分をWordpressタグに置き換えていく

ファイルに分割ができた状態でもページの表示は可能です。

このままだと同じ内容の表示しかできない(記事を追加しても表示されない)のでデータの読み込みが必要な部分をWordpressタグに置き換えていく必要があります。

functions.phpにサイドバーやCSSファイルの読み込みなどを追加する

CSSファイルはHTMLに直接記述することが推奨されていません。基本的にはfunctions.phpに記述することになります。

/**
 * CSSとJavascriptファイルの追加例
 */
function wpdocs_theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

この他にもfunctions.phpでページネーションやパンくずリストなどを追加することができますが、複雑な機能についてはプラグインで実装するようにしたほうが効率よくテーマを作成できます。

テーマの自作が難しいときの対処法

ここまでWordpressテーマの自作方法を紹介しましたが、難易度は少し高めでどうしても難しい場合があります。

そんなときでもオリジナルデザインのWordpressサイトを作る方法があるので紹介します。

ノーコードツールのElementorを使う

ElementorはHTMLもCSSもPHPも不要でWordpressサイトを作れる無料プラグインです。

テーマの自作が難しいときの対処法 ノーコードツールのElementorを使う

Wordpressの管理画面から通常のプラグインと同じようにインストールするだけでドラッグ&ドロップでページを作れる機能を無料で追加することができます。

こちらのストアではElementor向けのテンプレートを公開しているのでテンプレートをベースに効率よくサイトの作成ができます。

有料テーマを使う

もう1つの方法は高機能な有料テーマを使う方法です。

有料テーマはあらかじめ用意されたデモを1クリックでインストールできたり、テーマオプション機能で簡単にデザインの編集ができます。

テーマのソースコードはかなり複雑なのでコードのカスタマイズは難しいですが、管理画面から使える機能でページの作成ができるので比較的簡単にサイトの構築が可能です。

Wordpressテーマ自作のおさらい

長くなりましたが、Wordpressテーマ自作方法のおさらいをするとこんな感じになります。

  • メリットはなんでも作れるようになること、デメリットは時間がかかること
  • 学習サイトや書籍などで勉強しながら作っていく
  • 自分のパソコンにWordpressをインストールするところからはじめる
  • テーマの自作はベーステーマを使うかHTMLをWorpdress化する
  • 作ったテーマはサーバーにアップロードすることで全世界に公開できる
  • 難しい場合はElementorのようなノーコードツールを使う

Wordpressでテーマを自作するにはある程度勉強が必要なので少し難しいと感じるかもしれませんが、最近はElementorのようなノーコードツールがかなり進化しているのでこちらを使われることも増えています。

実際Wordpressの制作案件でもElementorを使ってサイトを作成することもあり、仕事としても使う機会が多くなっています。

この記事がテーマ自作の参考になれば幸いです。