クラシックテーマ

テーマの基本

初歩- the_post()??

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
  <?php endwhile; ?>

<?php else: ?>
  <p>No posts found. :(</p>
<?php endif; ?>

この一行目がもうphp初学者にはむずい。
解くとこうなる。

<?php if ( have_posts() ) : ?>
    <?php while ( have_posts() ) : ?>
        <?php the_post(); ?>
        <h1><?php the_title(); ?></h1>
    <?php endwhile; ?>
<?php endif; ?>

the_post()により、現在の$postがセットされている状態でのみ使えるテンプレートタグが使える。
the_title(), the_content()など。
LOOPという（専用解説ページあり）。

タグ、カテゴリ、カスタムタクソノミー

タグとカテゴリは各々管理画面から追加可能。使用はAIに聞けばいいけど一応

    <?php
      $categories = get_the_category();
      if (!empty($categories)) {
        echo '<ul class="post-categories">';
        foreach ($categories as $category) {
          echo '<li>' . esc_html($category->name) . '</li>';
        }
        echo '</ul>';
      }
      ?>
      <?php
      $post_tags = get_the_tags();
      if (!empty($post_tags)) {
        echo '<ul class="post-tags">';
        foreach ($post_tags as $tag) {
          echo '<li>' . esc_html($tag->name) . '</li>';
        }
        echo '</ul>';
      }
      ?>

カスタムタクソノミーとは、独自に作る新たな分類タイプ。
使用するにはプラグインが必要。「Custom Post Type UI」。

あわせて知っておきたいのは、「カスタム投稿」機能。投稿や固定ページとはことなる、新たに別の「投稿」を作る機能。
標準の投稿はブログ機能を持たせておいて、もう一つ商品とかよくある質問とか投稿したい場合にカスタム投稿機能を使う。
「Custom Post Type UI」でカスタム投稿もカスタムタクソノミーも設定可能。

ページ判定

条件タグというページに色々載っている。is_pageとかis_singleとか。
注意点として、functions.phpはクエリが読み込まれてデータが帰ってくる前に読み込まれるから、functions.phpで書いてもいみない。

投稿タイプ判定

get_post_type(), post_type_exists()
投稿タイプっていうのは、投稿（post）、固定ページ（page）のようなもの。

クイックタグ

<-- next page -->みたいなので、一つの投稿ページを2分割3分割とすることが可能。

サブページ

固定ページなどで、親ページを設定した子ページ（サブページ）を設定可能。

スクリプトとスタイル

functions.phpにwp_enqueue_script()またはwp_enqueue_style()を使用してスクリプトまたはスタイルを追加する。

WordPressには、jQueryなどのよく使われるライブラリは同梱されている。（/wp_includes/script-loader.phpで確認可能）
こういうのも、wp_enqueue_script("jquery")などで登録可能。

最善はこう

function add_theme_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );

	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );

	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

add_actionとは、WordPress は処理の途中に do_action('フック名') のような「差し込みポイント」がたくさんあるので、そこに自分の関数をくっつけるためのもの。
よく使われるのは、

init … 早い段階で設定・登録したいとき
wp_enqueue_scripts … スタイル・スクリプトの wp_enqueue_*
wp_head … <head> 内に何か出したいとき（乱用は非推奨で、CSS は基本 enqueue）
after_setup_theme … テーマのサポート宣言（add_theme_support など）

テンプレートファイル

標準で、header.phpやfooter.phpはget_header(), get_footer()で呼び出される。
header-foo.phpのようなものは、get_header("foo")で呼び出せる。

カスタムテンプレートとして、get_template_part("content") で content.phpを読もうとする。
get_template_part("content", "product")でcontent-product.phpを読む。
サブフォルダに置く時、get_template_part( 'content-templates/content', 'location' );

現在のディレクトリのURLの取得

やり方が3つあるけど、１つ覚える。

get_stylesheet_directory_uri()をつかう。
フォルダ内にアクセスする場合は、$url = get_stylesheet_directory_uri() . '/assets/main.css';

自作テーマファイル構造の好例

.
├── assets (dir)/
│   ├── css (dir)
│   ├── images (dir)
│   └── js (dir)
├── inc (dir)
├── template-parts (dir)/
│   ├── footer (dir)
│   ├── header (dir)
│   ├── navigation (dir)
│   ├── page (dir)
│   └── post (dir)
├── 404.php
├── archive.php
├── comments.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── index.php
├── page.php
├── README.txt
├── rtl.css
├── screenshot.png
├── search.php
├── searchform.php
├── sidebar.php
├── single.php
└── style.css

投稿タイプ対応

投稿、固定ページ、添付ファイル、リビジョン、ナビゲーションメニューなどが代表的なデフォルト投稿タイプ.。

個別投稿: single-{post_type}.php → なければ single.php → singular.php → index.php
アーカイブ一覧: archive-{post_type}.php → なければ archive.php → index.php
固定ページ: page.php、必要に応じて page-{slug}.php や page-{id}.php が使われます
通常の投稿: single.php が基本

特殊ファイルについて

comments.php はコメント表、image.php は画像アタッチメント表示など、1ファイル ≈ WordPress のある機能。

WordPress が「特別に扱う」フォルダ（必須ではないが認識される）

page-templates（3.4.0 以降）
カスタム固定ページテンプレートをここに置くと、WordPress が自動で認識する（整理しやすい）。
languages
テーマの 国際化（翻訳） 用のファイルを置くためのフォルダ。

サイト構成

テンプレートファイルが色いろある。https://i0.wp.com/developer.wordpress.org/files/2014/10/Screenshot-2019-01-23-00.20.04.png?ssl=1

WPデフォルトでは、トップページは投稿一覧ページになっている。そのため、企業サイトの例でトップとブログが分かれているという広くあるようなサイトを作るには、管理画面「表示設定」で固定ページをホームページにするよう変更した上、front-page.phpにトップの構築をするのが標準。
このとき、投稿一覧は固定ページにしたといえど、page-{slug}.phpでは作られない。home.php→index.phpの順に読まれる。

テンプレートタグ

データベースの内容を取り出したり表示したりするのに使う、WordPress 組み込みの PHP 関数。
get_header() で header.php を読み込む、the_title() で現在の記事タイトルを出す、bloginfo('name') でサイト名を出すなど。

複数ループ

同じクエリをもう一回回すだけ

rewind_posts() … メインクエリを先頭に戻し、同じセットの投稿をもう一度ループする用途（目次一覧のあとにもう一回本文など）。

別の条件でもう一つ一覧したい

new WP_Query( ... ) で サブクエリ を作り、
if ( $q->have_posts() ) : while ( $q->have_posts() ) : $q->the_post(); … のように回す。メインクエリと $post が食い違わないように リセットが重要。

functions.php

ダッシュボードに影響を及ぼすことのできるファイル。

よくやる実装を参照　https://developer.wordpress.org/themes/classic-themes/basics/theme-functions/

テーマ機能

ほぼ必ず級（多くのクラシックテーマで使う）

Navigation menus — メニュー登録・表示
Featured Images & Post Thumbnails — アイキャッチ／一覧サムネ
Pagination — アーカイブ・検索などのページ送り
Comments — コメント表示・テンプレ調整
404 Pages — 独自404テンプレ

コメント機能は簡単に実装できて驚いた。ダッシュボードのディスカッション設定で通知も受け取れる。検索フォームもテンプレートタグで作れて簡単。わお。

よく使う（サイトの型による）

Sidebars — ウィジェットエリア（サイドバー・フッター列など）
Taxonomy Templates — カテゴリ・アーカイブなど階層テンプレ
Media — アタッチメント・画像サイズなどコアのメディア連携
Internationalization / Localization — 配布テーマ・多言語・翻訳対応が必要なとき

テーマによる（頻度は下がる／オプションが多い）

Custom headers — 「ヘッダー画像をCustomizerで」という設計のとき
Widgets — 自作ウィジェットは、標準ウィジェットだけで足りるサイトでは省略されがち
Post Formats — 昔より優先度は下がり気味（ブロックエディタ側で表現することが多い）
Accessibility — 品質・公開テーマでは重要だが、ミニマムな個人テーマでは後回しになりやすい（とはいえ推奨）
Administration Menus — テーマオプション画面を自分で足すとき／プラグイン寄りのことが多い

WP_Query

WP_Queryは、WordPressのコアに組み込まれているクラスで、サイト内の投稿やページ、カスタム投稿タイプなど、様々なコンテンツを効率的にクエリ（検索・取得）するための強力なツールです。このクラスを使うことで、特定の条件に基づいてコンテンツを抽出し、それらをウェブページ上に動的に表示することができます。

フォーム

Contact form 7 というプラグインを使って簡単。
レンタルサーバーとドメインを契約していれば、メールアドレスをすぐに作成できるため、　ワードプレスが人気な一端がわかる。

ブロックテーマ

エクスポート簡単で、どのwpにもアップロードできる。「create block theme」というプラグインを使うと、高度なエクスポートが可能。

スタイルで変えた値とかはすべてtheme.jsonに入っている。

しかし、こういったUIでは実現できない機能を追加したい場合は、コードを直接扱う必要がある。

フォルダ構成

https://developer.wordpress.org/themes/core-concepts/theme-structure/

ブロックテーマにおいてはテンプレートは /templates/index.html

style.cssはすべてのテーマに必須だが、ブロックテーマではデザインは原則theme.jsonで行う。

規則

linkやscriptタグを手動でハードコーディングすることは絶対に避けるべき。（クラシックテーマ然り）
wp_enqueue_style(), wp_enqueue_script()

画像の最適解

<img src="<?php echo esc_url( get_parent_theme_file_uri( 'assets/img/example.webp' ) ); ?>" alt="" />

実際の作業

https://www.youtube.com/watch?v=19cX2LXPe34

コーディングというより、「サイトを編集する」から管理画面で触る感じか。
内容も、一から作るのではなく、「パターン」という雛形からある程度見られるものは可能。どこかしらからパターンを拾ってきてサイトを爆速で開発できる。　

ACFだとあとから枠を増やしたいとき、画像一個を間に追加したいと言うようなことはできなかったし、項目を複製するということもできなかった。
ユーザー側でブロックで操るほうが自由度が高い。

開発としては、デザイナーがブロックテーマの仕様を理解してコンポーネント指向の手法を取る必要。

BLOG

5/9

5/8

5/7

5/6

5/5

5/3

5/2

5/1

4/30

WordPress 備忘録