はじめに
毎回、新しくサイトのテンプレートを作るたびに、どうやって書くんだっけと思い出すのが面倒になってきたので、ここにまとめます。
動作確認はしていないので、間違っていたらごめんなさい。
順次、追記されるかもしれません。
functions.php
javascriptとcssの読み込み
function load_scripts() {
wp_enqueue_script( 'common-js', get_theme_file_uri( '/js/common.js' ), ['jquery'], '1.0', true);
wp_enqueue_style( 'common-style', get_stylesheet_uri(), [], '1.0' );
//このページだったら、このスクリプトを読み込む
if(is_page('recruit')) {
wp_enqueue_style( 'recruit-style', get_theme_file_uri( 'css/recruit.css' ), [], '1.0' );
}
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );
カスタム投稿タイプの作成
ぶっちゃけプラグインでやった方が楽かもね。
add_action( 'init', 'create_post_type' );
function create_post_type() {
$labels = [
'name' => 'カスタム投稿'
];
register_post_type( 'custom',
[
'labels' => $labels,
'public' => true,
'has_archive' => true,
'hierarchical' => true,
'menu_icon' => 'dashicons-clipboard', //管理画面のアイコンが変えられます
'show_in_rest' => true, //REST APIを使いたいとき
'supports' => [
'title',
'editor',
'thumbnail',
'page-attributes' //メニューの順序を使う場合にのみ
]
]
);
}
カスタムタクソノミーの作成
add_action( 'init', 'create_taxonomies' );
function create_taxonomies() {
$labels = [
'name' => 'タクソノミー'
];
$args = [
'hierarchical'=> true, //カテゴリーにしたい場合はture、タグにしたい場合はfalse
'labels' => $labels,
'show_in_rest' => true, //REST APIを使いたいとき
];
register_taxonomy( 'taxonomy_name', 'custom', $args );
}
第一引数が、カスタムタクソノミーの名前
第二引数が、紐付けたいカスタム投稿の名前
投稿の取得
$args = [
'posts_per_page' => -1,
'post_type' => 'なんか',
'orderby' => 'あれば',
'order' => 'どうぞ',
];
$my_posts = get_posts($args);
foreach ($my_posts as $post) : setup_postdata($post);
//投稿の中身
endforeach;
wp_reset_postdata();
投稿の中身
タイトル
the_title()
中身
the_content()
抜粋
the_excerpt()
日時
the_time('Y.m.d')
記事へのリンク
the_permalink()
アイキャッチ
the_post_thumbnail()
imgタグで出力されます
get_the_post_thumbnail_url()
画像URLのみ出力されます
- タクソノミー名
$term_info = get_the_terms(get_the_ID(), BLOG_TAXONOMY);
if($term_info) {
$term_name = $term_info[0]->name;
}
ACF(アドバンスド・カスタム・フィールド)
the_field('フィールド名')
固定ページでよく使う
- 画像パス
get_theme_file_uri('/images/title_arrow.svg');
- URL
home_url('ページのリンク')
- テンプレートファイル読み込み
例)テンプレートファイルの場所
template-parts/sp-banner.php
get_template_part('template-parts/sp', 'banner');
カスタムタクソノミーでの絞り込みなど
$now_page = get_query_var('paged');
$term_name = get_query_var('term');
$args = [
'post_type' => 'blog',
'paged' => $now_page,
'tax_query' => [
[
'taxonomy' => BLOG_TAXONOMY,
'field' => 'slug',
'terms' => $term_name
]
]
];
$my_posts = new WP_Query($args);
ページの判定
-
固定ページ
is_page('ページスラッグ')
実は、引数は文字列と配列の両方いけちゃうわけ。複数指定したかったら、配列でどうぞ。 -
archiveページ
is_post_type_archive('カスタム投稿タイプ名')
実は、引数は文字列と配列の両方いけちゃうわけ。複数指定したかったら、配列でどうぞ。 -
タクソノミーページ
is_tax('カスタムタクソノミー名')
実は、引数は文字列と配列の両方いけちゃうわけ。複数指定したかったら、配列でどうぞ。 -
個別ページ
is_singular('カスタム投稿タイプ名')
実は、引数は文字列と配列の両方いけちゃうわけ。複数指定したかったら、配列でどうぞ。
なんなら、引数なしでもいいよ。
テンプレートの分岐、階層
こちらのサイトに図があります。
このテンプレートを読み込むつもりなのに、なぜ読み込まれないんだ!?というときに見ましょう。
文章で読みたいという方は公式のテーマ階層のドキュメントもあります。
↑こちらのドキュメントを私がなんとなく翻訳したサイトもあります。
意外と知らない分岐もありますね。
スタート用テーマ
毎回、新規案件をやるときにテーマを用意するのが大変なので、テンプレートを使っています。
githubで公開していますので、ご自由にどうぞ。
WordPressスタート用テーマ
ついでに、素のhtmlサイトのスタート用ファイルもあります。
htmlスタート用テーマ
デバッグログ出力
こちらのサイトから
いつも参考に(コピペ)してます!ありがとうございます!!
define('WP_DEBUG', true);
define('WP_DEBUG_DISPLAY', false);
define('WP_DEBUG_LOG', true);
if(!function_exists('_log')){
function _log($message) {
if (WP_DEBUG === true) {
if (is_array($message) || is_object($message)) {
error_log(print_r($message, true));
} else {
error_log($message);
}
}
}
}
_log('出力したい内容');で、debug.logに出力されます。
WordPress、何が返ってきてるか分からないことが多いので、結構重宝します。
functions.phpが長くなるので、分けたい
include( get_template_directory(). '/include/aaa.php' );
定数が欲しい
お店の電話番号とかね。
//電話番号
const TEL_NUM = 'XXX-XXXX-XXXX';
//カスタムタクソノミー
const BLOG_TAXONOMY = 'blog_cate';
たまに書き忘れてハマる
- get_header();
- get_footer();
まとめ
意外と間が空くと忘れちゃいますよね。。
エンジニアでは、結構WordPress嫌ったりする人が多いですが、webサイトにちょっと毛の生えたシステム作るのめっちゃ楽だよなーと思います。
環境構築も一瞬だし、とりあえずカスタム投稿タイプ・タクソノミー・ACF使えば、わりとなんでも実装できちゃうので。。
CRUDを自分で書くのって同じことを何回も繰り返すので、工程としてはすっ飛ばしたいんですよね。