カテゴリー: Wordpress

Lightningのテーマから変更した点

子テーマのインストール

カスタマイズが上書きされないように下記のサイトから子テーマをダウンロードし、インストールする。

https://lightning.nagoya/ja/setting/customize/child_theme

子テーマのカスタマイズ

prism用

prismのプラグインもあるが、あまりしっくりこなかったので、prismjs.comから自分でダウンロードしたものを利用するためのカスタマイズ。

prism.jsとprism.cssをサーバに上げる。

以下の２フォルダにそれぞれコピーする。

~/<wordpress_folder>/wp-content/themes/lightning_child_sample/css
~/<wordpress_folder>/wp-content/themes/lightning_child_sample/js

テーマのカスタマイズ

cssとjsを読み込むためにfunctions.phpに下記のコードを書き込む。

/* *** js/cssの読込み *** */
function load_extra_files() {
  // Prism.jsのcssとjsの呼び出し
  wp_enqueue_style('prism-style', get_stylesheet_directory_uri() . '/css/prism.css');
  wp_enqueue_script('prism-script', get_stylesheet_directory_uri() . '/js/prism.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'load_extra_files');

CSSのカスタマイズ

　見出しと表のデザインを変えたかったのでCSSにカスタマイズを加える。

LightningのCSSカスタマイズ

　下記のいずれかに設定すれば反映される。

1. ExUnitのCSSカスタマイズ
2. 「外観」→「カスタマイズ」→「追加CSS」
3. 「外観」→「テーマの編集」→「style.css」を編集

ウィジットの変更

サイドバー共通上部

1. 検索
2. カテゴリー
3. VK最新記事
4. VK固定ページ本文：プロフィールなど固定したいページ

サイドバー投稿

　投稿記事を開くと共通上部の下に表示されるようになる。

1. 検索

　Wordpressで目次をつけて、さらに「目次へ戻る」リンクを作成する手順の備忘録
　エディタはGutenbergを使用しています。

プラグインを導入

プラグインはEasy Table of Contentsを利用しました。

プラグインの設定

　「目次へ戻る」を追加するために下記の設定を変更しておきます。その他の設定はお好みで。

位置：　最初の見出しの前（デフォルト）
見出しラベルを表示：　チェックを外す

再利用ブロックの作成

　GutenbergのカスタムHTMLで再利用ブロックを２つ作ります。topindexというidは任意です。

①目次アンカー

　aタグを使って目次のタイトルを作成します。

<a id="topindex">目次</a><br>

②目次へ戻る

　右寄せにする場合はdivタグで囲みalign=”right”を指定します。

<div align="right"><a href="#topindex">目次へ戻る</a></div>

使い方

　使い方は、最初の見出しの前に、「目次アンカー」を挿入し、あとは自分の好きな場所に「目次へ戻る」ブロックを挿入していくだけです。

実際に使用しているページ

　組み込むと下記のように目次と目次へ戻るを配置できます。

https://raspberrypi.mongonta.com/googleaiyvoicekit/googleaiyvoicekitv2feature/

カスタマイズ

　CSSでデザインをカスタマイズする場合は下記を参考にしてCSSをカスタマイズしてください。
　アンカーを使うと下線が表示されてしまうのですがtext-decoration: none;で下線を表示しないようにしています。

a#topindex {
     display:block;
     width: 100%;
     height:50px;
     line-height: 50px;
     color: #FFF;
     text-decoration: none;
     text-align: left;
     background-color: #7f0028; /*ボタン色*/
     border-radius: 5px; /*角丸*/
     font-size: xx-large;
     font-weight: bold;
}
a#topindex:hover {
  text-decoration: none;
}