ロードバイクとウインドサーフィン、ランニング、そして日々の出来事を綴ります

【THE THOR】初心者奮戦日記 #2

1.アップデート 1.2.0

変更箇所 2018.11.09
(1)PWA利用時にのみSERVICEworkerが作成されるように変更
(2)CSSファイルやJavascriptファイルを読み込めるように、高度な設定を追加
(3)サイトカード本文抜粋文字のエラーを修正。
(4)AMPページ用の「いいねJavascript」の出力条件を追加
(5)カスタマイザーのPWAエリアの文言を「有効か」から「有効化」に修正
(6)HTMLの圧縮/非圧縮を切り替えできるように変更

うーん、正直言って(2)しか、現在の自分では理解不能です…

2.高度な設定(2)の追加

Name
LION系テーマに備わっていた高度な設定をTHORにも実装。【外観】→【カスタマイズ】→【基本設定】→【高度な設定】からCSSファイルをheaderで読み込んだり、Javascriptを</body>の直上で読み込んだりできます。
やった! これでFont Awsomeが利用できる。と言う訳で、THORテーマの親の方を1.2.0へアップデート
早速、グローバルメニューをアイコンで飾りたいと思います。

3.Font Awsomeの使い方

(1)header部に貼るCSSをサイトからゲット!

早速、Font Awsomeのページ(無料版)へ!
画像にあるCSSを、クリップボードのアイコン(下の画面の右下部)をおして、コピー

(2)THORのヘッダーへCSSを設定

WordPressに戻って、THORのカスタマイズで上述のとおり【高度な設定】の</head>直上の自由入力エリアの欄に、ペースト。これでFont Awsomeが利用できるようになります。

(3)Font Awsomeの利用したいアイコンのfont情報をゲット!

a. またまた、Font Awsomeのサイトに移動し、画面上部のメニューから「Icons」をクリック

b. 左サイド部のカテゴリーからfreeを選び、利用したいアイコンを選択。
c. Click to Copy HTMLでコピー

(4)メニューの項目名にペースト

a. WordPressの「外観」>「メニュー」
b. 「編集するメニューを選択」で「メニュー(ヘッダーエリア)」を選択
c. ▼で内容を開いて「ナビゲーションラベル」にペースト

 

(5)終わり

これで、画面上部のグローバルメニューの文字の前にアイコン(文字)が追加されました。

ここまでだと、残念ながらヘッダー部のみ反映されて、投稿ページにHTMLで挿入しても反映されませんね。以上、THORでFont Awsomeを利用した作業をご報告しました。

できれば、続けてサイトマップの登録とGoogle Adsenseに挑戦してみたいと思います。サイトマップはTHOR機能で作成するとHTML形式になるみたいでGoogle さんからエラーって言われるんですよね。うーん…

最新情報をチェックしよう!

04: My Lifeの最新記事4件