忘れないように。
style.css
管理画面のテーマ一覧で表示する。
テーマディレクトリの直下に保存する。
ファイルの最上部に以下のフォーマットでテーマ情報を入力する。
/*
Theme Name: テーマの名前（必須）
Theme URL: テーマのサイトのURI
Description: テーマの説明
Author: 作者の名前
Version: テーマのバージョン
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/入れ忘れてても読み込んでたので問題ないっちゃない。
screenshot.png
管理画面のテーマ一覧で表示する。
テーマディレクトリの直下に保存する。
1200*900pxで作成。
無くても困らない。
functions.php
wpの諸設定を行う。
テーマディレクトリの直下に保存する。
とりあえず以下の内容は入れておく。
/* title自動生成有効化 */
add_theme_support( 'title-tag' );
/* 親スラッグ指定許可 */
function is_parent_slug() {
global $post;
if ($post->post_parent) {
$post_data = get_post($post->post_parent);
return $post_data->post_name;
}
}
/*【表示カスタマイズ】アイキャッチ画像の有効化 */
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 600, 400, true );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );
/* 【管理画面】カスタム投稿タクソノミー絞り込み */
function add_post_taxonomy_restrict_filter() {
global $post_type;
if ( 'post_qa' == $post_type ) {
?>
<select name="tas_qa">
<option value="">カテゴリー指定なし</option>
<?php
$terms = get_terms('tax_qa');
foreach ($terms as $term) { ?>
<option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
<?php } ?>
</select>
<?php
}
else if ( 'post_guide' == $post_type ) {
?>
<select name="tax_guide">
<option value="">カテゴリー指定なし</option>
<?php
$terms = get_terms('tax_guide');
foreach ($terms as $term) { ?>
<option value="<?php echo $term->slug; ?>"><?php echo $term->name; ?></option>
<?php } ?>
</select>
<?php
}
}
add_action( 'restrict_manage_posts', 'add_post_taxonomy_restrict_filter' );
/* MW WP FORM pタグ自動挿入無効化 */
<?php
function mwwpformP() {
if ( class_exists( 'MW_WP_Form_Admin' ) ) {
$mw_wp_form_admin = new MW_WP_Form_Admin();
$forms = $mw_wp_form_admin->get_forms();
foreach ( $forms as $form ) {
add_filter( 'mwform_content_wpautop_mw-wp-form-' . $form->ID, '__return_false' );
}
}
}
mwwpformP();includeが使えるので、functions.phpにまとめて書き込まなくてもいいっちゃいい。
設定内容がめっちゃ多いときとか、ファイル別に管理したいときとかに使える。
一番最後のはフォームのプラグインをMW WP FORMにしたときのやつ。
そのままだと旧版WPよろしくひょんなことで<p>が自動挿入されて、ソースコード派からすると不都合があるんで無効化しておく。CONTACTFORM7でも同じことになるかもしれんので念頭に入れておく。
include( get_template_directory().'temp/functions-include.php' );WP管理画面でメニューを作りたければこんな感じで書く。
functions.phpに登録しておかないと使えない。
//ナビゲーション
function menu_setup() {
register_nav_menus( array(
'header' => 'ヘッダーメニュー',
'footer' => 'フッターメニュー',
));
}
add_action( 'after_setup_theme', 'menu_setup' );サムネ画像のサイズ指定をしたい場合はこう。
「post_120x120_thumbnail」のところは呼び出し時に使う任意の名称にする。
//サムネイル
add_image_size('post_120x120_thumbnail', 120, 120, true);
add_image_size('post_150x150_thumbnail', 150, 150, true);URLからパラメータを抜き取りたい場合、functions.phpに仕込める。
各種テーマファイルでやるとデータの受け渡しに難が出る場合があるのでこっちに書いたほうが良い。
特定パラメータを取得して、それを発火点としてcookieを仕込む例。
// urlパラメータ取得
function add_query_vars_filter($vars){
$vars[] = '【パラメータ名】';
return $vars;
}
add_filter('query_vars','add_query_vars_filter');
//cookie
add_action( 'get_header', 'my_setcookie');
function my_setcookie() {
if(get_query_var('【パラメータ名】') == '【パラメータ値】'){
setcookie( '【cookie名】', '【cookie値】', time() + 60*60*24*7,'/');
}
}上記を発火点に表示切り替えをしたい場合はこんな感じ。
<?php if(!(get_query_var('【パラメータ名】') == '【パラメータ値】' || $_COOKIE["【cookie名】"] == 【cookie値】)): ?>
<!-- 該当パラメータがあるまたはcookieが仕込まれてた場合 -->
<?php endif; ?>まあここまでやるのはめったにないけど。
header.php
必要最低限はこんなところか。
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js"></script>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><a href="<?php echo esc_url( home_url('/') ); ?>"><?php bloginfo( 'name' ) ?></a></h1>
</header>get_template_directory_uri();は末尾に「/」が付かないので補完する必要あり。
メニューの表示も書きたいところだけど、カスタマイズが色々あるしデザインによってテクい事が必要だったりするので今回は割愛。
出力タグは「wp_nav_menu」なので、とりあえずそれを調べるといいです。
結構細かく指定できる。
header.phpの読み込みは以下の通り。名称末尾に任意のテキストを追加することでheader.phpのパターンを増やすことができる。
記載場所は</head>の直前。
header.php読み込み
<?php get_header(); ?>
header-sample.php読み込み
<?php get_header('sample'); ?>footer.php
footer.phpで気をつけることはあんまりないんだけど、強いて言うならcopyrightで何年から何年みたいな書き方をしたいとして、それでも1年目は書きようがないというか書いてもダサいんで、とりあえずは開始年はコメントでメモっとくのがいい。
<footer>
<p class="copy">© <?php echo date('Y'); /* since 2021 */ ?> <?php bloginfo( 'name' ); ?>, All Rights Reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>footer.phpの読み込みは以下の通り。名称末尾に任意のテキストを追加することでfooter.phpのパターンを増やすことができる。
記載場所は</body>の直前。
footer.php読み込み
<?php get_footer(); ?>
footer-sample.php読み込み
<?php get_footer('sample'); ?>page.php
page.phpは名前にスラッグを追加すれば各固定ページ専用のものを用意できる。
page-【固定ページスラッグ】.php
また、page.phpは先頭に以下のコードを追加することでテンプレート化できる。
スラッグが異なるページでもテンプレートを適用することで使用できるので、例えば問い合わせフォームのpage.phpを作っておいて各種問い合わせページで使うってことができる。
<?php /* Template Name: 【テンプレート名】 */ ?>とりあえずで全部のpage.phpに仕込むと逆にめんどくさいことになるので、必要最低限のほうがいい気もする。
記事の表示についてはこんなかんじ。
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()): the_post();?>
<main>
<h1><?php the_title(); ?></h1>
<article><?php the_content(); ?></article>
</main>
<?php endwhile; endif; ?>
<?php get_footer(); ?>single.php
single.phpもpage.phpと似てる。
カスタム投稿を用意した際、カスタム投稿スラッグをファイル名末尾に追加したら専用のsingle.phpになる。
single-【カスタム投稿スラッグ】.php
記事表示はこんな感じ。
<?php get_header(); ?>
<?php if(have_posts()): while(have_posts()): the_post();?>
<main>
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
} ?>
<h1><?php the_title(); ?></h1>
<article><?php the_content(); ?></article>
</main>
<?php endwhile; endif; ?>
<?php get_footer(); ?>一緒ですね。
アイキャッチ画像はこんなのとか。
<?php if(has_post_thumbnail()): ?>
<img src="<?php the_post_thumbnail_url(); ?>" alt="<?php the_title(); ?>">
<?php endif; ?>sidebar.php
header.php、footer.phpみたいに別ファイルを読み込むイメージ。こちらは任意なので不要なら作らなくていい。
sidebar.phpもファイル単位で使い分けが可能。
sidebar.php読み込み
<?php get_sidebar(); ?>
sidebar-sample.php読み込み
<?php get_sidebar('sample'); ?>番外：自動転送専用テンプレート
アーカイブページとか検索ページとか、カスタムフィールドがつけられないページがある。
でも諦める必要はなくて、固定ページとかでそれ用のページを作って読み込んじゃえばいい。
ACF環境下で特定のページのカスタムフィールドを取得する場合はこう。
<?php the_field(【カスタムフィールド】, 【ページID】) ?>ACFの深堀りはしないとして、本題は、カスタムフィールドがほしいだけでデータ用のページは見せたくないんだっていう点。まあ、普通に表示してるページで兼用してもいいんだけどスマートじゃないっていうか、管理が変わったら混乱しそうというか。
下書きとか非公開にしてもカスタムフィールドを引っ張ってこれることは確認したけど、そんな状態で置いておくと不要なページと思って消されちゃう可能性もある。無駄にリスキーになる。
ということで、公開状態にあっても表示しないページ化しましょうっていう話。
やることは簡単で、以下の2つを仕込んだテンプレートを読ませたらいい。
- 検索対象から除外する
- 特定ページ（トップページとか）に自動転送する
<?php /* Template Name: gotohome */ ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex">
<meta http-equiv="refresh" content="0;URL='<?php echo esc_url( home_url('/') ); ?>'" />
</head>
<body>
</body>
</html>自動転送にディレイはつけてないけど仕様として一度ページ自体を読み込んじゃうんで、中身が空っぽの状態にする。そうしたら表示されるのは真っ白なページ（無）だから、ユーザーからしたら読み込み時間ちょっと長いな？ってなる。そもそもリンクなんかつけないからアクセスさせないけども。
カスタムフィールドに限らず各ページのディレクトリ分けをしたいけどほしいのはディレクトリだけでそのトップページは要らんってときにも使えるんで、転送を仕込んだテンプレートは作っといてもいいんじゃないでしょうか。
外部ファイル読み込み周り
.cssとか.jsは、まあ、外部読み込みするのが当たり前のところがある。
importとかincludeとかで外部ファイルから更に外部ファイルを読み込めたりしてホント便利ですね。
デザインを編集した際、キャッシュが敵になる。旧データを読み込んじゃって表示が崩れるとかよくある。再読み込み一発で更新されたり、全然さっぱり更新されなかったりですっごいめんどくさいことがある。これはサーバー側だったりWPの機能だったりでキャッシュが作成されたり、ブラウザのキャッシュだったりで原因になる部分が多くて面倒がすごい。
wpのテーマファイルは基本的にキャッシュされない。されることもあるけど、その外部ファイルに比べたら反映は早い。ということで、テーマの切り替わりに外部ファイルが追いつけばなんとかなる。
理屈はとりあえずそんな感じで、外部ファイル読み込み箇所はこんな感じにするといい。
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css?=<?php echo date('YmdHis') ?>">
<script src="<?php echo get_template_directory_uri(); ?>/js/scripts.js?=<?php echo date('YmdHis') ?>"></script>パラメータを付けることで強制的に再読み込みさせる。パラメータ内容がページ読み込み時の年月日時分秒だから都度再読み込みが発生する。本当なら外部ファイル更新時に都度書き換えたほうが最低限って感じでいいんだけどね。問答無用で再読込させるって、結構乱暴なんだけどね。
で、ついでに、例えばcssファイル内でimportするようなハブになるやつを辞める。
全部header.phpで読み込む。条件分岐とかめんどくさいね。
まあでも全部のstyleを1データにまとめてぶち込むところもあるし、めんどくさけりゃただ全部をheader.phpに貼り付けちゃってもいいんじゃね？って感じがありますね。cssはそんなに重くないし、まだ許容範囲かもしれない。
コメント