WordPressテーマ開発レッスン

こちらのリポジトリでは、別途公開されている動画を元にWordPressテーマ開発の方法を学習するための情報を公開しています。

レッスンを進めるために必要な環境

  • WordPressを利用できる環境(ローカル環境推奨)
  • テキストエディタ(使いやすいものでOK)

事前に必要な知識

  • 初歩的なHTML/CSS/JavaScriptの知識
  • 基本的なPHPの知識
  • WordPressの基本的な仕組みの知識

HTMLやCSS、JavaScriptに関しては、自分でスラスラ書けるとベターですが、読んで意味がわかるくらいでも大丈夫だと思います。

こちらのレッスンでは、これらについて詳しく取り上げることはありません。(要望があれば別途レッスンを作成します)

PHPに関しても同様に、ソースコードを見て、なんとなくやっていることが分かるようであれば、当レッスンにおいては問題ないかと思います。

とりあえず必要な前提知識として形式上書きましたが、挑戦してみて理解できるならOK、できなかったら調べながら進めれば問題ないと思います。ご自身のペースで学習を進めてみてください。まずやってみることが大切です。

WordPressに関する基本的な知識というのは、一般的なユーザーが普通に利用していて習得できるレベルでの理解と考えてください。ですので、WordPressの構造云々という知識は必要ありません。(あるに越したことはありませんが)

レッスンの進め方

当リポジトリにレッスンの順序に応じたテーマファイルが用意されています。

1つのセクションに対して、1つのテーマでレッスンを進めます。積み上げ式のレッスンではないので、学びたいセクションだけサクッと試してみるということも可能な仕組みにしています。

各セクションの詳しいレッスン内容については、それぞれのテーマファイル内にあるドキュメントを参照してください。

事前に行なって欲しいこと

事前にインストールしてほしいプラグイン

レッスンセクション内容

  • ガイダンス(進め方など)
  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を作成する
    1. after_setup_themeにフックするもの
    2. $content_widthを設定する
    3. wp_enqueue_scriptsでCSSとJavaScriptを読み込む
  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()