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と競合した為使用せず。

olの連番をcounter関数で表示

olの連番のピリオドを消す為、list-styleではなくcontent: counter()での表示にした。

CSS追加

licounter-increment: カウンタ名
li::beforecontent: counter(カウンタ名)を指定する。

ol li
	position: relative
	list-style-type: none
	counter-increment: cnt
	&::before
			position: absolute
			width: 1em
			height: 1em
			left: -1.4em
			text-align: center
			content: counter(cnt)
続きを読む olの連番をcounter関数で表示

リンクにサイトアイコンを表示

CSSの疑似要素でリンクにサイトアイコンを付ける。
URLで判別する為、よく使うリンク先をいくつかCSSに記載しておく。

アイコンDL

続きを読む リンクにサイトアイコンを表示

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のヘッダとフッタを読み込ませたい。
ヘッダ内サイドバーには最新記事リスト等があるので自動生成したい。

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