WordPressの関数「wp_head」はデフォルトでさまざまなコードを出力します。
オリジナルでテンプレートを開発する場合に、このコードが邪魔になることがほとんどです。しかし、wp_head自信を削除してしまうと、プラグインなどが正常に動作しなくなる危険性があります。
なぜなら、wp_headやwp_footerがあることを前提に開発されているプラグインが多くあり、動作に必要なコードを出力しているからです。

そこで、今回はfunctions.phpにアクションフックを記述して、不要なコードの出力を省く方法を調査します。

実際に表示されるコードと削除方法

以下、各セクションにおいて、まずwp_headを読み込むとデフォルトで出力されるHTMLソースを提示します。
次に、そのソースを表示させないため、functions.phpに書き込むアクションフックを示します。

※順不同です。また、新しいバージョンでは表示されなくなっているものもあります。

NVM(Node.js version manager) for Windowsで複数バージョンのNode.jsを使用します。
GitHub – coreybutler/nvm-windows: A node.js version management utility for Windows. Ironically written in Go.

開発環境において、Node.jsを使用する場面が増えてきました。
Node.jsはバージョンアップのサイクルが早い上、バージョンによる環境依存が強いです。
そのため、プロジェクトが増えると、複数バージョンのNode.jsが必要になってきます。
めんどくさいですね。

NVMを使用すれば、複数バージョンのNode.jsをインストール、切替など、簡単に管理できます。

今回はWindows 10 Homeにインストールしてみます。

上記の公式サイトより、 nvm-setup.zipをダウンロードします。zipファイルを解凍してnvm-setup.exeを実行し、インストールします。
インストール中、既にインストール済みのNode.jsがある場合は、NVMで管理するかどうか選択できます。

CSS変数を使ってみます。

例えば、CSSでテーマカラーなど同じ値を複数個所のプロパティに設定する場合、管理が煩雑になりますね。

body{
	color: #333333;
}
a{
	color: #333333;
}
table{
	border-color: #333333;
}

これまでは、sassで変数を管理していました。
ただ、最近はCSSのみで変数（カスタムプロパティ）が使えるようになったようです。

動画をレスポンシブ対応で上下左右中央に余白なしで設置する方法です。

動画と言っても、mp4ファイルなどをvideoタグで設置したり、Youtubeをiframeで埋め込んだり、さまざまです。
設置した動画の左右や上下が欠けたり、レスポンシブに対応してなかったり、上付きで不自然に下部が欠けてたり、印象が悪いですよね。
そこで画面全体、メインビジュアル、モーダルなどに、良い感じで設置する方法を考えます。

videoタグを余白なしで上下左右中央に設置する方法

例えば、videoタグを画面全体やメインビジュアルの背景として設置します。
レスポンシブ対応で、余白なしで、上下左右中央配置が理想だと思います。
まず、HTMLです。

<div class="bg">
	<div class="video">
		<video src="video.mp4" autoplay muted loop></video>
	</div>
</div>

メインビジュアルに動画を設置すると仮定し、横100%、高さ300pxのエリアに描画する場合、以下のようにCSSを指定します。

JavaScriptやjQueryでクリックイベントを設置した際に、そのイベントを子要素、孫要素へ伝播させないための処理を紹介します。

よくあるケースとして、ライトボックスのようなしくみを構築したときを考えます。
ブラウザの画面全体をグレーアウトして、その上のレイヤに画像、動画やフォームなどのコンテンツを配置します。

<div class="lightbox">
	<div class="grayout">
		<div class="contents">
画像、動画やフォームなどのコンテンツ
		</div>
	</div>
</div>

コンテンツエリアを除く、グレーアウトエリアをクリックすると、ライトボックスをクローズするような処理を考えます。

stopPropagationを使う方法

例えばjQueryでグレーアウトしたエリアをクリックすると、ライトボックスをクローズするような処理を追加します。

$('.grayout').click(function(){
	$('.lightbox').fadeOut();
});

しかし、そのままでは子要素である「class=”contents”」のコンテンツエリアまでイベントが伝播してしまい、コンテンツエリアをクリックしてもクローズしてしまいます。
そこで、コンテンツエリアをクリックしてもイベントが発生しないように以下の処理を追加します。

$('.contents').click(function(event){
	event.stopPropagation();
});

これで今回の伝播の問題は達成できるのですが、コンテンツエリアに他のイベントを設定している場合、その処理に悪影響を与える場合があります。

コンテンツエリア以外でイベント発火

stopPropagationの問題を避けるため、以下の方法があります。

$(document).on('click', function(event) {
	if (!$(event.target).closest('.contents').length) {
		$('.lightbox').fadeOut();
	}
});

画面全エリアにクリックイベントをセットして、その中でクリックエリアを判定して、処理を実行する方法です。

後者のほうがシンプルで良さそうですね。
忘れてしまいがちなので、メモまで。

「Laravel Mix」といえば、Laravelに付属しているタスクランナーです。

昨今、タスクランナーといえばnpm-scriptやgulpをよく聞きますが、どうもしっくりこないんですよね。
そこで、今回はLaravel本体は使用せずにタスクランナー機能のみを利用できる「Larave Mix Stand-Alone」を試してみます。
Laravel Mix
実はLaravel Mixの中身はwebpackで、それをより便利に使いやすく設計されたツールだそうです。そうだったんですね。

以下、Windows 10で、Node.jsがインストール済みであることが前提です。

Laravel Mixをインストール

Laravel Mixをインストールします。プロジェクトフォルダに移動して、以下のコマンドを実行します。

> npm init -y
> npm install laravel-mix --save-dev

インストールが完了したら、同一ディレクトリにファイル「webpack.mix.js」を新規作成し、以下のコードを記述します。

let mix = require('laravel-mix');

処理は空っぽの状態ですが、以下で実行します。

> npx mix

Githubからgit clone時に途中でエラーとなり、cloneできない事象に遭遇しました。
環境はWindows 10、git 2.18です。

エラーの内容は以下のとおり

fatal: early EOF
fatal: The remote end hung up unexpectedly
fatal: index-pack failed

原因ははっきりとしませんでしたが、どうやらリポジトリの容量が大きいことで発生してるようです。

そこで、まずはオプション「depth」を使って最新の履歴のみをcloneします。

>git clone --depth 1 git@github.com:helog/helog.git

無事cloneできました。

次に、cloneしたディレクトリに移動して、オプション「unshallow」を指定して残りの履歴を取得します。

>cd helog
>git fetch --unshallow

コマンドが無事完了すればclone完了です。

Githubが無料になったみたいですね。
当時、無料で制限なく使えるGitリモートリポジトリサービスがなかったので、独自でリモートリポジトリを構築していました。Gitを学習したり、遊んだりするのに、サービスに月額でお金を払うというのはちょっともったいないですよね。
現在、Githubは個人が趣味や学習で使う分には制限もなく、無料で利用できるようになったということなので、リモートリポジトリをお引越しすることにしました。

作業環境は
Windows 10
git 2.18
です。

移行元リポジトリをローカルにクローンする

まず、移行元リポジトリをローカルにミラークローンします。今回は秘密鍵を使用しているので、鍵を指定します。

>set GIT_SSH_COMMAND=ssh -i C:/Users/helog/openssh.key & git clone --mirror ssh://helog@helog.xxxx.jp:22/home/helog/repos.git

クローンにはしばらく時間がかかります。コミット量やデータ量にもよると思いますが、今回は10分程度でした。
終了したらクローンしたフォルダに移動します。

>cd repos.git

とあるLaravel 6.xプロジェクトでBootstrapを使用しているのですが、普通にCDNで読み込んでます。
Laravelではフロントエンドのパッケージ「laravel/ui」が用意されているので、せっかくなので切り替えてみたいと思います。
Laravel 5.8では標準搭載されていたlaravel/uiとBootstrapですが、Laravel 6.xからは含まれていないので、自身でインストールする必要があります。

laravel/uiをインストール

まず、laravel/uiをインストールします。

> composer require laravel/ui
Using version ^3.2 for laravel/ui
./composer.json has been updated
Running composer update laravel/ui
Loading composer repositories with package information
Updating dependencies
Your requirements could not be resolved to an installable set of packages.

  Problem 1
    - laravel/ui[v3.2.0, ..., 3.x-dev] require illuminate/console ^8.0 -> found illuminate/console[v8.0.0, ..., 8.x-dev] but these were not loaded, likely because it conflicts with another require.
    - Root composer.json requires laravel/ui ^3.2 -> satisfiable by laravel/ui[v3.2.0, 3.x-dev].


Installation failed, reverting ./composer.json and ./composer.lock to their original content.

エラーになってしまいました。

LinuxコマンドでjpegoptimでJPG画像を圧縮します。
個人的に、ローカルでの画像圧縮処理でjpegoptimはとても優秀で、画質劣化を最小限にして、大幅に画像容量を圧縮することができます。

実行する環境はUbuntu 20.04、jpegoptim 1.4.6です。

基本的に、以下のようにオプションと画像名を指定してコマンドを実行します。
オプション「–strip-all」を付けることで、画像が持ってる位置情報やコメントを削除します。この場合、画質はそのままです。
ちなみに処理後に容量が大きくなる場合は、圧縮処理はスキップされます。

$ jpegoptim --strip-all sample.jpg

オプションに品質「–max=1～99」を指定することで、画像劣化を伴った画像圧縮を実行できます。
個人的な感想ですが、品質80ぐらいでも十分容量を抑えることができます。品質40ぐらいから画像劣化が目立ちはじめます。

$ jpegoptim --max=80 sample.jpg

画像にもよりますが、ご参考までに、上のコマンドで品質80で容量を75%削減、品質40で容量を85%削減することができました。

逆に容量を指定して圧縮することもできます。オプション「–size=400」で400KBに圧縮、また、オプション「–size=50%」で容量を半分に圧縮することができます。

$ jpegoptim --size=400 sample.jpg
$ jpegoptim --size=50% sample.jpg