WordPressで定義リストdlを使う

2列構成・サイズ可変のリストを、スペース連打やテーブルを使わずに作りたい。
dl(定義リスト)のグリッド化で実装。

食べる
野菜
食べない
<dl class="grd">
  <dt>肉</dt>
  <dd>食べる</dd>
  <dt>野菜</dt>
  <dd>食べない</dd>
</dl>
dl.grd
	display: grid
	grid-template-columns: 1fr 1fr
	width: fit-content

シンプルで理想的だが、WordPressで使えるリストブロックはolulのみ。
dlを作成出来るプラグインを探す。

続きを読む WordPressで定義リストdlを使う

WordPressのHCBに言語を追加

Highlighting Code Blockプラグインに対応言語を追加する。

設定

  1. 管理画面の設定 > [HCB] 設定 > ヘルプ(最下部)のリンクにアクセス
  2. 追加したい言語にチェック
  3. DOWNLOAD JSでprism.jsをDLし、テーマフォルダ以下にUP
  4. HCB設定の使用する言語セットクラスキー:”言語名”,形式で行を追加
    ※クラスキーはprism.jsの2行目で確認
  5. 独自prism.jsにパスを記入し、設定を保存

SASSとAutoHotKeyを追加した。
CSSもDL出来るがHCBと競合した為使用せず。

WordPress覚書

パス取得定数・関数

ABSPATHWordPressディレクトリのフルパス+/
TEMPLATEPATH
get_template_directory()
親テーマディレクトリのフルパス
STYLESHEETPATH
get_stylesheet_directory()
子テーマディレクトリのフルパス
get_theme_file_path子テーマ(優先)、無ければ親テーマディレクトリのフルパス
home_url()サイトのURL
site_url()WordPressのURL
get_template_directory_uri()親テーマディレクトリのURL
get_stylesheet_directory_uri()子テーマディレクトリのURL
get_theme_file_uri()子テーマ(優先)、無ければ親テーマディレクトリのURL
ABSPATHのみスラッシュが付く

てがろぐスキンを自動生成

てがろぐ
https://www.nishishi.com/cgi/tegalog/

自鯖にマイクロブログを置けるCGI。何とも懐かしいデザイン(CGI自体が懐かしい)だが2017年作で、更新も精力的になされている。Spotify等の埋め込みにも対応している最新スクリプトである。

CSSとスキン(懐かしい)で自由にデザイン出来るという事で、WordPress製サイトの一部として馴染むように設置を試みた。

スキンの構成

  • skin-cover.html ページ全体
  • skin-onelog.html ↑に差し込まれる記事部分
  • tegalog.css

skin-cover.htmlにWordPressのヘッダとフッタを読み込ませたい。
ヘッダ内サイドバーには最新記事リスト等があるので自動生成したい。

続きを読む てがろぐスキンを自動生成

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以下は非表示。

続きを読む WordPressの管理バーを小型化

WordPressにミニマップ実装

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

設置

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

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