WordPressのテーマを作り,ウェブサイトを開設する.

HTML,CSS,PHPの勉強のためにWordPressを用いたテーマを作成し,ウェブサイトの開設をしてみることにした.
これは,その上で参考にしたサイトや何をやったかの覚え書きである.

テーマ作成

骨組み作り

オリジナルテーマの基となるものを作成する際に,主に次のサイトに沿う形で作成させていただいた.

また,以下のサイトも参考にさせて頂いた.

ヘッダー

ヘッダーメニューは当分使用する見込みがないことから削除.

代わりに,スマホ・タブレット版において,右上のメニューからサイドバーが表示されるように変更した.この動作にはもう少し検証が必要そうである.

サイドバー

長くなるので,このページにまとめたので参照のこと.

検索窓のスタイルは少しいじった.

タイトル回り

パンくずリストを追加(最大2カテゴリー←うまくいかなかったので廃止),最終更新日を追加,タグを移動,その他デザインの変更

フッター

フッターからトップに飛べるように変更

固定ページ

今のところ,固定ページはトップでしか使う予定が無いので,サイドバーを削除してしまった.これに伴い,スマホ・タブレット版の右上のメニューアイコンも固定ページでは表示しない.

アーカイブページ

サムネがある場合は,右に設置.テキストとかぶらないように,text-with -thumb 属性を付与し,右側に margin を取るようにした.

ない場合は text属性のみ付与されるので,右側の margin が付与されない.

本文の要素

見出し

デザインの変更,H5は1.5remだけindentすることにした.それに伴い,本文もindentさせるindentクラスを追加

引用

引用時のデザインを次のサイトを参考に作成した.

サンプルの20番を基に作成させて頂きました.

間隔と色味を調整した.

tableのwidthを100%→autoに変更した.

中央配置(fugure のクラス aligncenter),右揃え fugure のクラス alignright) を実装した.

箇条書き

黒丸だと味気ないので,オレンジの四角に.
さらに,2階層以下のものはオレンジの三角を導入した.

参考にさせて頂いたサイトは以下

before疑似要素で描いており,位置の微調整がフォントサイズによっては必要な可能性がある.

また,リストの直下のリストの終了後にスペースが開かないようにmargin-bottomを調整してある.

box

内容を強調したい時の書式としてboxクラスを導入した.div, p, ul, ol タグに対応.スマホ版のみ,レスポンシブルデザインに対応.

Mathjax

次の奥村先生のページから,スクリプトを利用させて頂きました.

奥村晴彦「MathJaxによる数式表示」 https://oku.edu.mie-u.ac.jp/~okumura/javascript/mathjax.html

Highlight.js

書いていたら量が多くなりすぎてしまったので,これも別ページに移転

プラグイン

とりあえず入れてみたプラグイン一覧

  • Duplicate Post : 記事を複製するためのプラグイン
  • Easy Table of Contents : 目次作成をしてくれるプラグイン,サイドバーで使用
  • Redirection : リダイレクトを設定してくれるプラグイン

AweSome

AweSome のフォントがひたすら表示されなくて,とても困った.

そんな時に救ってくれたページがこちら

まさにドンピシャ,原因はフォントの指定でした.

.widget_nav_menu li a::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: '\f105';
}

こんな感じで,font-family に ‘Font Awesome 5 Free’ ときっちり書かないといけないそう.また,font-weight は free版だと,400 か 900 しか選べないそうな.

そういえば作り途中だった気がするものたち