WordPressの管理バーを小型化

主張が強すぎるログイン時のadmin bar。
CSSで完全非表示、プラグインでマウスオーバー表示などに出来るが、利便性を求めて「小型化して必要なボタンのみ常時表示」にする。

何故右なのかというと、検索フォームが左に伸びる為。

CSS追加

#wpadminbar {
	top: 50%;
	left: auto;
	right: 0;
	transform: translateY(-50%);
	width: 40px;
	min-width: 40px;
	height: auto;
	padding: 6px 0;
}

@media screen and (max-width: 782px) {
	html #wpadminbar {
		display: none;
	}
}

#wp-admin-bar-site-name,
#wp-admin-bar-customize,
#wp-admin-bar-new-content,
#wp-admin-bar-edit {
	width: 30px;
	overflow: hidden;
}

#wpadminbar .quicklinks > ul > li > a {
	padding: 0 10px;
}

#wpadminbar .ab-top-menu > li.hover > .ab-item, #wpadminbar.nojq .quicklinks .ab-top-menu > li > .ab-item:focus, #wpadminbar:not(.mobile) .ab-top-menu > li:hover > .ab-item, #wpadminbar:not(.mobile) .ab-top-menu > li > .ab-item:focus {
	background: transparent;
}

#wp-admin-bar-wp-logo,
#wp-admin-bar-updates,
#wp-admin-bar-comments,
#wp-admin-bar-my-account {
	display: none;
}

#wpadminbar .quicklinks .ab-top-secondary > li {
	padding: 0 3px;
}

画面幅782px以下は非表示。

function.php編集

function.phpに以下を追加。
上部に32px確保されるのを阻止する。

function remove_adminbarsp()
{
	remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_adminbarsp');

WordPressにミニマップ実装

IDEによくあるミニマップ。近年どんどん細く掴みにくくされるスクロールバーの代わりになり大変便利。
Vivaldiのページアクション機能でWebページにも適用出来て感動し、検索するとスクリプトが配布されていたのでWordPressに設置してみた。

設置

配布元: pagemap · mini map for web pages · larsjung.de
設置は簡単で、JSを読み込み、<canvas>タグとスクリプトを一行追加し、CSSで調整。同梱のdemoからコピーできる。

続きを読む WordPressにミニマップ実装

WordPressのCSSを高速更新

WordPressテーマの「Sass編集・コンパイル・プレビュー・アップロード」を全てVSCodeで完結する。サーバはVALUE/CORE SERVER。

VSCode設定

Sass編集

大体標準で対応。SASS記法のシンタックスハイライトは拡張機能Sassを入れる。

コンパイル

拡張機能Live Sass Compilerを入れる。ステータスバーWatch Sassで監視開始。.sass/.scss保存時に.cssが自動生成される。

続きを読む WordPressのCSSを高速更新

WordPressの画像を減量

png保存のSSがかさばる。画像編集ソフトを立ち上げずD&Dで手軽に圧縮したい。現在の主流はWebアプリだが、画像をUP・DLする時間が無駄なのでフリーソフトを探す。

画像圧縮に求める条件

  • 画像をD&Dで圧縮・保存
  • 圧縮が高速
  • PNG→JPG変換
  • オフライン

PNGロスレス圧縮系は遅い上にほとんど減らず。D&Dのみで実行ボタンすら不要のBzzt! Image Editorにした。画像回転オプションもあり助かる。

唯一、画像の上書きor保存先の設定が記憶されないという欠点がある。PNG→JPG変換は上書きされないので問題は無いが、JPG→JPG圧縮時に注意。
→Version 1.2.9(2021/04/29)で保存先が記憶されるようになった。

続きを読む WordPressの画像を減量

理想のLightboxを求めた

WordPressに理想的な挙動のモーダルウィンドウを実装する。

画像モーダルに求める条件

  • 画像クリックで閉じる (×や背景のクリックは面倒)
  • シンプル (フレームや影やズームボタンは不要)
  • アニメーション無し (ふわっと出るのは時間の無駄)
  • スワイプ対応 (左右で閲覧、上下で閉じる)
  • WordPressで設定したキャプションが出る

Lightbox系プラグインを色々入れて設定してみた所、全て満たせるのはFancyBox for WordPressだけだった。大抵は「画像クリックで閉じる」か「スワイプ対応」が出来ない。

FancyBox~で機能的には申し分ないが、スワイプの挙動に不安定な所がある。PCだと横長の画像しかスワイプ出来ず、スワイプ失敗時キャプションの領域が謎に増えてゆく。(元のFancyBox3では問題ない)

「画像クリックで閉じる」以外を満たし、操作感が気持ちいいLightbox with PhotoSwipeを改変してクリックで閉じられるようにする。

続きを読む 理想のLightboxを求めた

WordPressプラグイン

管理

Enable Media Replace
メディアライブラリの画像を差替。png→jpgも可能、記事修正不要。

FileBird Lite
メディアライブラリでファイルをD&Dしてフォルダ分け。

HTML Editor Syntax Highlighter
テーマ・プラグインエディタのコードをハイライト表示。
(記事エディタのスタイル変更はChrome拡張のStylusを使用)

No Category Base
カテゴリURLからcategory/を削除して簡潔に。

UpdraftPlus
バックアップ。オンラインストレージ対応。

JM Twitter Cards
Twitterカード作成。Twitter Cards Metaから移行。

(Better Admin Bar)
admin barを消してマウスオーバーで表示。
→CSSでの小型化に移行。記事

(Jetpack)
多機能プラグイン。追加CSS画面でSCSSを使う為にそれのみ有効化。
→VSCode拡張のLive Sass Compile+SFTPに移行。記事

続きを読む WordPressプラグイン