イントロダクション – [00]WordPressテーマ制作レッスン

標準的なWordPressテーマ制作方法を学べるレッスンカリキュラムを作成しました。これらは全て無料で学習することができます。また、簡易マニュアルやソースコードなどはGitHubに全て公開しています。

GitHub
Olein-jp/wp-theme-develop-lesson
Olein-jp/wp-theme-develop-lessonContribute to Olein-jp/wp-theme-develop-lesson development by creating an account on GitHub.

今回は、このWordPressテーマ制作レッスンを進めるにあたり、どのような準備や環境が必要か(推奨しているか)を解説していきます。動画でも解説しているので併せてご利用ください。

目次

解説動画

このレッスンで学べることと学べないこと

学べること

WordPressテーマの標準的な作り方を学習することができます。

我流ではなく、WordPress Theme Developer handbookに沿った作り方を習得することで、WordPressの標準的な機能やプラグインを正常に利用できるテーマを作れるようになります。

WordPress Developer Resources
Theme Developer Handbook | WordPress Developer ResourcesWelcome to the WordPress Theme Developer Handbook, your resource for learning all about the exciting world of WordPress themes. The Theme…

学べないこと

このレッスンでは、各セクションごとに学習用テーマファイルを用意しています。

そのセクションの学習に必要なHTMLマークアップやCSSスタイリングが完了したソースコードに、学習する内容のプログラムを入力して実行結果を確認して学習を進めます。

ですので、HTMLやCSS、JavaScriptを学習者が用意したり入力することはほとんど必要ありません。よって、フロントエンド部分については特別取り扱ったりすることはありませんので、HTMLやCSS、JavaScriptは特段学べることはありません。

レッスンを進める上で持っていると良い知識

上の「学べないこと」でも書いているように、フロントエンドに関する技術にはあまり触れません。ですので、事前に以下に関する初歩的な知識を持っているとスムーズに学習が進められるでしょう。

  • HTML
  • CSS
  • JavaScript

また、WordPressは主にPHPで作られています。ですので、PHPの基本的な記述方法なども理解していると良いでしょう。

あと、WordPressを実際に触ったことがある経験は必要でしょう。テーマやプラグインの基本的な役割なども簡単に理解されている方が良いです。

しかし、事前知識があるかないかという判断よりも「やってみよう!」という意欲や気持ちの方が数倍大切です。ですので、不安な場合でも、その気持ちを大切にして「できるかできないかわからないけどやってみよう!」と進んでみてください。

レッスンを進めるための準備

  • ローカル環境(ご自身のパソコン内)で動くWordPressを用意(推奨)
  • テキストエディタなどソースコードを入力・編集するもの

インターネット上に公開してあるWordPressでも学習を進めることは可能ですが、利便性が低くなるためローカル環境でのWordPressを推奨しています。

用意の方法は、こちらを参照してください。

あわせて読みたい
WordPressを自分のパソコンの中で動かす一番簡単な方法[Local利用]
WordPressを自分のパソコンの中で動かす一番簡単な方法[Local利用]ここでは、WordPressをレンタルサーバーなどを使ったインターネット上ではなく、自分のパソコンの中で立ち上げて動かせる環境を作る方法を解説していきます。なぜ自分の...

レッスンの進め方

レッスン項目はこのようになっています。

  1. テーマの雛形を作るfunctions.php/index.php/style.css/screenshot.png
  2. style.cssにテーマ用コメントを付ける
  3. CSSスタイルを読み込む(ハードコーディング)
  4. JavaScriptを読み込む(ハードコーディング)
  5. テンプレートタグを使ってみよう (wp_head()/wp_footer()/body_class()/wp_body_open()
  6. CSSファイルへのリンク設定 (get_stylesheet_uri()
  7. 画像ファイル・JavaScriptファイルへのリンク設定 (get_theme_file_uri()
  8. サイト内リンクの設定/ウェブサイト名などの表示 (home_url() bloginfo( 'name' ) language_attributes() bloginfo( 'charset' )
  9. functions.phpを作成する
  10. 投稿一覧をループで作成する (have_posts() the_post()
  11. 各投稿ごとの情報を設置する (the_ID() post_class()
  12. 投稿データを表示するためのテンプレートタグを設置する (the_title() the_permalink() the_time() the_category() the_tags()
  13. ページネーションを作成する (the_posts_pagination()
  14. 共通部分をテンプレートファイルとしてまとめる (show current temlplateで確認)
  15. 記事詳細ページ(single.php)、固定ページ(page.php)のテンプレートファイルを作成する (the_post_navigation()/<h1>タグの分岐設置など)
  16. アーカイブページ(archive.php)の作成
  17. ホームページ表示に対応するfront-page.phpを作る
  18. カスタムページテンプレートの使い方
  19. ウィジェットを利用できるようにする (register_sidebar() dynamic_sidebar()
  20. カスタムメニューを利用できるようにする (register_nav_menus() wp_nav_menu()

また、レッスンに利用するソースコードのパッケージはこのような内容になっています。

一部分のスクリーンショットです

例えば、レッスン1の「テーマの雛形を作る」の学習を進めたい場合には、ローカル開発環境のWordPressの中のwp-contentのなかのthemesの中に、上記フォルダの中のwp-lesson-01というフォルダをコピーもしくは移動させましょう。

そして、そのフォルダを利用して動画やテキストなどを参照して学習を進めてください。そのセクションの学習を完了したらwp-lesson-01_finというフォルダの中にあるようなファイルやソースコードが出来上がります。うまくいかない場合には、完成版フォルダのファイルの中身も確認してみてください。

WordPressにあらかじめ入れておきたいプラグイン

ユニットテストデータのインポート

WordPress Codexからユニットテストデータが提供されています。

あわせて読みたい
テーマユニットテスト - WordPress Codex 日本語版

こちらのデータをインポートしておくことで、考えうる様々な投稿や固定ページの状態のデモデータを利用して、マークアップやスタイリングを修正し、どのようなデータを入力されても対応可能なテーマを作ることができます。ぜひテーマ制作をする上では活用するべきデータです。

この記事が気に入ったら
フォローしてね!

この記事を書いた人

Web制作系フリーランスです。岐阜地域のWordPressやCoderDojoのコミュ二ティ活動に参加しています。最近は映像やカメラにも力を入れています。やんちゃ坊主たちの父親もやっています。

目次
閉じる