仕方ないので読み込みなど現在のWordPressのルール確認

例のごとく作業しながら、忘備録で更新。

先日はからWP-bootstrap4テーマをカスタマイズした始めたが
どうもちゃんとBootstarp4のライブラリを順序良く読んでいなかった。
なので、一つ別にWordPressを用意してテンプレートフォルダの格納ルールを見てみる。

インストール。

現在Twenty Seventeenが最新か。まずは中身を見る。

twentyseventeen
┣ assets
┃　┣ css
┃　┣ images
┃　┗ js
┃
 ┣ inc
 ┣ template-parts

そうか、今はこういう感じか、assetsはcsssやjsなど読み込みんでいるのはわかるが、どこで読み込ませてるのか。
function.php内に、

add_editor_style( array( 'assets/css/editor-style.css', twentyseventeen_fonts_url() ) );

		// Create the custom image attachments used as post thumbnails for pages.
		'attachments' => array(
			'image-espresso' => array(
				'post_title' => _x( 'Espresso', 'Theme starter content', 'twentyseventeen' ),
				'file'       => 'assets/images/espresso.jpg', // URL relative to the template directory.

何か読み込む流儀があるのか？オートロード？

参考：
https://www.findxfine.com/programming/wp/995559550.html
https://jonchristopher.us/blog/grunt-wordpress-theme-development/

https://www.webprofessional.jp/faster-wordpress-theme-development-beans-framework/

このassetとかフレームワークの流儀か？
じゃ、もっとシンプルなブランクテーマも観てみる。
Responsive

Responsive

underscores

Home

JointsWP

Home

Generic

Generic

Bones

Bones – An HTML5, Mobile-First starter theme for rapid WordPress development.

HTML5 Blank
http://html5blank.com/

参考
@https://www.wpblog.com/best-wordpress-starter-themes-for-developers/
＠http://websae.net/wordpress-bones-20141203/

再度確認

1. どこでCSSを読み込みしているのか？
   普通に作ればheader.phpに<link rel=”styesheet”~と書くが、
   何もない自作のテーマで調べてみる。
   <?php wp_head(); ?>で読んでいるのか？→　読んでいる。
2. 不要なものを消す。

WordPressでwindow._wpemojiSettings

<meta name=”generator” content=”WordPress 4.9.8” />
WordPressのバージョン情報を消す
remove_action(‘wp_head’,‘wp_generator’);

?ver= ってのも消す

ログイン状態のCSSを分かるようにする。

以下で出るので、ここをhtmlのコメントで括っておく

<style type="text/css" media="screen">
html { margin-top: 32px !important; }
* html body { margin-top: 32px !important; }
@media screen and ( max-width: 782px ) {
html { margin-top: 46px !important; }
* html body { margin-top: 46px !important; }
}

wp-includes/admin-bar.php

function _admin_bar_bump_cb() { ?>
<!--ログイン時適用スタイル--------------------------------------------------->
<style type="text/css" media="screen">
	html { margin-top: 32px !important; }
	* html body { margin-top: 32px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 46px !important; }
		* html body { margin-top: 46px !important; }
	}
</style>
<!--ログイン時適用スタイル--------------------------------------------------->
<?php
}

<link rel=’https://api.w.org/　無効化

<link rel=’https://api.w.org/‘ href=’http://アドレス/wp-json/’ />
WordPress4.4からコアに実装された REST API を呼び出すためのコード

remove_action( 'wp_head', 'rest_output_link_wp_head' );

＠参考

WordPressがheadに挿入する「api.w.org」とは。またその無効化の方法

https://takuo4649design.com/weblog/note/archives/9834

EditURI 

これは、ピンバックのアドレスを指定しているものです。
「誰かがこのページへリンクを貼ったら、ここに指定しているアドレスへ通知してね。」という意味で、ここに指定しているアドレスへ通知が来ると、Wordpressはコメントが投稿された動作と同じ動作をします。このようなピンバックやトラックバックが必要ない方は、削除して構いませんね。

＠See　https://wp-setting.info/setting/remove_header_edituri_wlwmanifest.html

IEの対応

<!--[if lt IE 9]>
<link rel='stylesheet' id='twentyseventeen-ie8-css' href='http://アドレス/wp-content/themes/twentyseventeen/assets/css/ie8.css' type='text/css' media='all' />
<![endif]-->
<!--[if lt IE 9]>
<script type='text/javascript' src='アドレス/wp-content/themes/twentyseventeen/assets/js/html5.js'></script>
<![endif]-->

<script>(function(html){html.className = html.className.replace(/\bno-js\b/,’js’)})(document.documentElement);</script>

JSの読み込み箇所
<script type=’text/javascript‘ src=’サイトアドレス/wp-includes/js/jquery/jquery.js’></script>
これはどこで指定しているのだろうか。

＠テーマにJavaScriptを正しい方法で読み込む

CSSやJavaScriptの読み込みはheader.phpに書くこともできますが、functions.phpでwp_enqueue_style()、wp_enqueue_script()をアクションフックに登録して読み込むことが推奨されています。
wp_enqueue_style()やwp_enqueue_script()を利用する利点として、CSSやJavaScriptの重複読み込みを回避できたり、functions.php内で一元管理できることなどが挙げられます。
＠see https://rfs.jp/sb/wordpress/wp-lab/wp_enqueue_script.html

functions.php

function add_files() {
  	wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );

wp_enqueue_styleのパラメータ

ふむ。

では、この状況でブランクテーマを利用して作ってみるか。