WordPressのテーマを作り,ウェブサイトを開設する.
HTML,CSS,PHPの勉強のためにWordPressを用いたテーマを作成し,ウェブサイトの開設をしてみることにした.
これは,その上で参考にしたサイトや何をやったかの覚え書きである.
テーマ作成
骨組み作り
オリジナルテーマの基となるものを作成する際に,主に次のサイトに沿う形で作成させていただいた.
- 「wordpressテーマ作成の記事一覧」 Plusers https://plusers.net/category/wordpress/wordpress-theme
また,以下のサイトも参考にさせて頂いた.
- 「WordPressのテーマを自分で作成してみたら意外と簡単だった!」 wp.geek https://wpmake.jp/contents/theme/theme_create/
- 「はじめてのWordPressまとめ」 https://wordpressmatome.com/
ヘッダー
ヘッダーメニューは当分使用する見込みがないことから削除.
代わりに,スマホ・タブレット版において,右上のメニューからサイドバーが表示されるように変更した.この動作にはもう少し検証が必要そうである.
サイドバー
長くなるので,このページにまとめたので参照のこと.
検索窓のスタイルは少しいじった.
タイトル回り
パンくずリストを追加(最大2カテゴリー←うまくいかなかったので廃止),最終更新日を追加,タグを移動,その他デザインの変更
フッター
フッターからトップに飛べるように変更
固定ページ
今のところ,固定ページはトップでしか使う予定が無いので,サイドバーを削除してしまった.これに伴い,スマホ・タブレット版の右上のメニューアイコンも固定ページでは表示しない.
アーカイブページ
サムネがある場合は,右に設置.テキストとかぶらないように,text-with -thumb 属性を付与し,右側に margin を取るようにした.
ない場合は text属性のみ付与されるので,右側の margin が付与されない.
本文の要素
見出し
デザインの変更,H5は1.5remだけindentすることにした.それに伴い,本文もindentさせるindentクラスを追加
引用
引用時のデザインを次のサイトを参考に作成した.
- 「CSSで作る!魅力的な引用デザインのサンプル30(blockquote)」サルワカ https://saruwakakun.com/html-css/reference/blockquote
サンプルの20番を基に作成させて頂きました.
表
間隔と色味を調整した.
tableのwidthを100%→autoに変更した.
中央配置(fugure のクラス aligncenter),右揃え fugure のクラス alignright) を実装した.
箇条書き
黒丸だと味気ないので,オレンジの四角に.
さらに,2階層以下のものはオレンジの三角を導入した.
参考にさせて頂いたサイトは以下
- 「コピペで使えるリストデザイン34選:CSSで箇条書きをおしゃれに」サルワカ https://saruwakakun.com/html-css/reference/ul-ol-li-design
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 のフォントがひたすら表示されなくて,とても困った.
そんな時に救ってくれたページがこちら
- 「FontAwesomeでアイコンが□(四角)になって表示されない場合の対策まとめ(:after:before利用時)」株式会社WEB企画 https://webkikaku.co.jp/homepage/blog/hpseisaku/htmlcss/fontawesome-trouble/
まさにドンピシャ,原因はフォントの指定でした.
.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 しか選べないそうな.