【初心者向け】WordPressテーマの作り方まとめ【仕組みを解説】

【初心者向け】Wordpressテーマの作り方まとめ【仕組みを解説】

こんばんは、氷犬です。

プログラミング学習中で、Wordpressをこれから勉強する人向けに、Wordpressテーマの作り方をまとめました。

 

内容としては以下のとおり。

この記事の内容

  1. WordPressテーマの基本的な仕組み
  2. WordPressテーマの作り方と手順【初心者向け】
  3. 実際に使ったWordpressのファイルとタグを解説

内容としては、「Wordpressの仕組みの理解」に重点を置いているので、コードの書き方など技術的な面についてはさらっと書いています。

具体的なWordpressテーマの構築については、「Plusers | 常にスキルをプラスしていく人のためのWeb情報サイト」がとてもわかりやすいです。

 

では、順番に解説していきます。

-スポンサードサーチ

WordPressテーマの基本的な仕組み

この記事では、僕が作ったWordpress用ブログテーマ『Anemone』を例に出して解説します。

デモページがあるので、軽く見てもらえると理解しやすいかなとm(_ _)m

Anemoneのデモページ

WordPressのテーマはテンプレートの組み合わせ

Wordpressのテーマはテンプレートの組み合わせ

WordPressは、HTML/CSSで作った1枚のページを、いくつかのパーツに分解し、それを再度組み合わせることでブラウザに表示しています。

 

たとえば、上の画像だと、次のように分解することが可能です。

header/index/sidebar/footerの4パーツ

このようにパーツを分解することで、ファイルを柔軟に扱えるようになります。

 

実際のファイルを見ても、パーツごとにファイルが分かれているのがわかりますね。

1つのページを分割し、テンプレートタグというシステムを使って、くっつけるのがWordpressの仕組みです。

 

簡単に言うと、パズルみたいなものですね。

WordPressを使うと、サイトの管理や更新がとても楽になりますd(^_^o)

テンプレートタグとPHP

WordPressはPHPという言語で動いています。

PHPはサーバーサイド言語と言われるもので、そのまま書くのは難しいです。

 

そこで、Wordpressはテンプレートタグというものに置き換えることで、誰にでもわかりやすく扱えるようにしています。

WordPressのテンプレートタグ

  • get_header():ヘッダーを表示する
  • echo bloginfo():サイトの基本情報を表示する
  • get_stylesheet_uri():style.cssを呼び出す

テンプレートタグというと難しく聞こえますが、要はパズルのピースです。

 

適切な場所に適切なピース(テンプレートタグ)を使うことで、1枚のパズル(Webサイト)を完成させるイメージ。

テンプレートタグはHTMLファイルの中に書く

WordPressの基本構造のまとめ

WordPressの基本構造

  • 1枚のページをパーツごとに分解して扱う
  • パーツをくっつけるために使うのがテンプレートタグ
  • WordPressはPHPで動く

WordPressはPHPで動くとはいっても、PHPは基礎だけ理解しておけばOKです。

WordPressはPHPというより、Wordpressという言語だと思った方が扱いやすいかなと思いますm(_ _)m

WordPressテーマの作り方と手順【初心者向け】

ここからは初心者向けにWordpressテーマの作り方を解説していきます。

 

手順としては次のとおり。

WordPressテーマの作り方

  1. HTML/CSSで見た目を作る
  2. ①で作ったファイルをWordpressのテーマ化
  3. HTMLファイルの要素を少しずつテンプレートタグで置き換え

①HTML/CSSで見た目を作る

まずは、HTML/CSSで見た目を作っていきます。

完成形のイメージ

classとかidを指定しつつ作っていくと思いますが、この時点ではあまり意識しなくてもOKです。

見た目作りはそこまで難しくないので、説明は不要かなと思います。

②作ったファイルをWordpressテーマ化

見た目を作ったら、作ったファイルをWordpressテーマ化します。

WordPress化の手順

  1. header/index/sidebar/footer.phpに分ける
  2. テンプレートタグを使って、分けたファイルをくっつける

具体的な手順については、Plusersというサイトがわかりやすいです。

初心者必見!自作のWordPressオリジナルテーマを作成する方法を徹底解説

 

「1枚のページを分割して、くっつける」というWordpressの仕組みを理解すると、何の作業をしているかわかるので楽ですね。

③HTMLファイルの要素を少しずつテンプレートタグで置き換える

header/index/sidebar/footerなどに分割したら、Wordpressのタグが使えるようになるので、少しずつHTMLファイルの中身を置き換えていきます。

 

置き換える部分と、テンプレートタグをまとめるとこんな感じです↓

この全体像のうち、

サイト名を変えられるようにし:echo bloginfo()

グローバルナビを設定できるように:wp_nav_menu()

サイドバーのウィジェットを有効化:(functions.phpで動かします)

記事がある時に記事の一覧を表示:have_posts()

①記事のタイトル:the_title()
②日付:echo get_the_date()
③カテゴリー:get_the_category()
④抜粋文(ディスクリプション):the_excerpt()

全体で考えるとわけがわからないですが、細かく見ていけば「なんとかできそうかな…」という感じですよね。

最初はかなり難しく感じると思います。でも、しつこく取り組んでいけば大丈夫ですd(^_^o)

 

ただ、慣れないと難しいのは確かなので、わかりやすい本で学ぶといいと思います。

おすすめは『Wordpressレッスンブック』という本で、かなり簡単なので基礎を身に着けるのに最適です。

『Wordpressレッスンブック』の内容を紹介!【初心者向け】

2018.08.14

-スポンサードサーチ

実際に使ったWordpressのファイルとタグを解説

ここからは僕がブログテーマを作るにあたって、実際に使ったWordpressのファイルとテンプレートタグを解説していきます。

WordPressのファイル【基本】

WordPressの基本的なファイル

  • header.php:ヘッダー
  • index.php:トップページを表示するため
  • sidebar.php:サイドバー,ウィジェット
  • footer.php:フッター
  • single.php:投稿した記事を表示するため
  • page.php:固定ページを表示するため
  • functions.php:Wordpressの機能を有効化したり、ショートコードを加える
  • style.css:見た目の装飾

single.php(投稿ページ)とpage.php(固定ページ)は、役割や更新頻度が違うので分けています。

コーポレートサイトを例に出すと、会社概要やお問い合わせページは更新頻度が少ないので固定ページを使います。

一方で、事業についてのニュースは投稿ページを使うというイメージですね。

 

僕が作ったテーマでは、固定ページの場合、サイドバー(ウィジェット)を表示しないようにしています。

投稿ページはサイドバーがある

固定ページはサイドバーがない

WordPressのテンプレートタグ

WordPressには多くのテンプレートタグがあるのですが、公式サイトのリファレンスは数が多すぎるので、実際に使ったものをまとめました。

①パーツをくっつけるためのタグ

  • get_header():ヘッダー(header.php)を表示する
  • get_sidebar():サイドバー(sidebar.php)を表示する
  • get_footer():フッター(footer.php)を表示する
  • get_template_part():任意のphpファイルを表示する

get_template_part()タグは、たとえばこんな風に使います。

SNSシェアボタンを表示するために使ったり(sns.php)

関連記事の一覧を表示するために使います(relate-posts.php)

get_template_partは、とても便利に使えるタグなので、覚えておいて損はないです。

②CSSや画像データを表示するタグ

  • echo get_stylesheet_uri():「style.css」を読み込む
  • echo get_template_directory_uri():Wordpress上の画像データを読み込む

WordPressのCSSやJavaScript、イメージデータを読み込むにはファイルパスが少し特殊になるので、専用のタグが必要になります。

 

③いろんな情報を出力するタグ

  • echo home_url():トップページのURLを出力
  • echo bloginfo():サイトの情報
  • the_title():記事のタイトル
  • the_permalink():記事の個別リンク
  • echo get_the_date():記事の投稿日時
  • the_excerpt():記事の本文を抜粋表示(ディスクリプションも)
  • echo get_the_category_list():カテゴリーの一覧
  • the_tags():タグの一覧
  • the_post_thumbnail():サムネイルを表示
  • the_content():記事の本文を表示

トップページ・投稿ページ・固定ページでよく使うタグですね。

 

④その他のタグ

  • previous_post_link():次のページへのリンクを表示
  • next_post_link():前のページへのリンク
  • echo paginate_links(array()):複数ページへのリンクを番号で表示
  • mytheme_breadcrumb():パンくずリストを表示
  • post_class():タグに特定のclassを追加する

いわゆるページャーやパンくずリストと呼ばれるやつですね。

SEO対策において、Googleのクローラーが巡回しやすくするために設置しておくものです。ユーザーの利便性にも配慮。

WordPressのテーマは調べれば作れる

WordPressは日本語の情報が多く、英語がわからなくても調べれば何かしら情報が出てきます。

僕も初めてテーマ作りをした時は、全部自分で調べて作りました。

 

ただ、HTML/CSS/PHPの基本的なことがわかってないとかなり苦労するので、Wordpressを扱う前に各言語の基礎を固めた方がいいかなと思います。

プログラミングの効率的な学習方法については、以下にまとめましたのでどうぞm(_ _)m

プログラミングの効率的な学習方法と手順を5ステップで【ゼロから】

プログラミングの効率的な学習方法と手順を5ステップで【ゼロから】

2018.08.16

 

Web制作をするのであれば、Wordpressの知識は必須なので、確実に身に着けておきましょうd(^_^o)

スポンサーリンク
スポンサーリンク