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

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

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

インストール。

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

twentyseventeen
┣ assets
┃ ┣ css
┃ ┣ images
┃ ┗ js

 ┣ inc
 ┣ template-parts

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

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

参考:
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=”generatorcontent=”WordPress 4.9.8” />
WordPressのバージョン情報を消す
remove_action(‘wp_head’,‘wp_generator’);

?ver= ってのも消す

function remove_cssjs_ver2( $src ) {
    if ( strpos( $src, ‘ver=’ ) )
        $src = remove_query_arg( ‘ver’, $src );
    return $src;
}
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver2’, 9999 );
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver2’, 9999 );

 

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

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

wp-includes/admin-bar.php

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

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

 

@参考

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の対応

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

JSの読み込み箇所
<script type=’text/javascriptsrc=’サイトアドレス/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

wp_enqueue_styleのパラメータ
引数 説明 必須
$handle スタイルシートを区別するハンドル名を指定します。
$src スタイルシートのURLを指定します。
$deps 依存スタイルシートのハンドル名を配列で指定します。
この引数で読み込み順を制御できます。
$ver 任意のバージョンを指定します。
バージョン情報はスクリプトのURLにパラメータとして追加されるので、ブラウザキャッシュ対策に使えます。
$media スタイルシートのメディアを指定します。

ふむ。

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

 

 

 

 

 

 

 

 

Follow me!

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA