WordPress 覚書き

テーマ

Cocoonを使用
最近ロリポップでWordpress追加時に指定可能となったのでセットアップが楽になった

プラグイン

WP Multibyte Patch
ロリポップでWordpress追加時にインストール済み

WP Page Post Widget Clone
ロリポップでWordpress追加時にインストール済み

Site Kit by Google
ロリポップでWordpress追加時にインストール済み

SiteGuard WP Plugin(ジェイピー・セキュア)
不正アクセス/ログイン防止
WordPressのログイン画面のURLが変わるので一番初めに導入

Highlighting Code Block(LOOS, Inc.)
コードブロック追加
ライン番号など表示できる(標準のでは機能不足)

Insert Pages(Paul Ryan)
共通パーツを各ページに表示できる

Hide Page And Post Title(Arjun Thakur)
投稿ページタイトルを非表示
ページごとに投稿タブのHide Page and Post Titleの項目のHide thie title.をonにする

CMS Tree Page View(Jon Christopher)
記事が多くなりそうだったので記事をツリー表示できるプラグインを導入
投稿と固定ページでメニュー内をチェック

WordPress設定

https指定

設定 – 一般 でWordPress アドレス (URL)とサイトアドレス (URL)をhttpsに変更

パーマリンク設定

設定 – パーマリンク設定 で基本かカスタム構造で以下を設定
/%category%/%postname%/

サイトアイコン(ファビコン)設定

外観 – カスタマイズ のサイト基本情報で設定
アイコンサイズは16px, 24px, 32px, 48px, 64px, 128px, 256pxで.icoを作成するのが良いらしいけどとりあえず100pxの.pngを使用

見出しデザイン変更

外観 – テーマエディター のCocoon Childのstyle.cssで変更したい内容を追加
Cocoonのスキンに依存しない内容にする

/* 見出し カスタマイズ */
.article h2 {
  color: #000;
  font-size: 24px;
  font-weight:bold;
  padding: 4px;
  border-left: none;
  border-radius: 0 0 0 0;
  border-bottom: solid 2px #000000;
  margin-bottom: 16px;
}
.article h3 {
  color: #000;
  font-size: 18px;
  font-weight:normal;
  padding: 0px;
  border-left: none;
  border-radius: 0 0 0 0;
}
.article h3:before {
  content: "・";
}
.article h4 {
  border-top:none;
  border-bottom:none;
  padding: 0;
}
.article h5 {
  border-bottom:none;
  padding: 0;
}
.article h6{
  border-bottom:none;
  padding: 0;
}

Cocoonの投稿者情報を非表示

鉛筆アイコンのやつ
クリックされると意図しないページが表示されてしまうので非表示

/* 著者情報非表示(固定ページ) */
.page .author-info {
    display: none;
}

/* 著者情報非表示(投稿ページ) */
.post .author-info {
    display: none;
}

Cocoonのタイトル非表示

タイトル表示が無駄スペースなので消したい
タイトルが未設定であれば表示されないけど検索で困るのでCSSで非表示

/* タイトル非表示 */
.logo-header {
    display: none;
}

<code>の装飾

Android Developer風の装飾

/* <code>カスタマイズ */
code {
  display: inline-block;
  margin: 0 0.2em; /* ブロック前後の余白 */
  padding: 0 0.2em; /* ブロック内の余白 */
  background-color: #F8F9FA;
  border-radius: 3px;
  border: solid 1px #E8EAED;
  font-family: Consolas, Menlo, Monaco, -apple-system, BlinkMacSystemFont, "Segoe UI", Meiryo, monospace;
}

カテゴリーのタイトルカスタマイズ

/* カテゴリータイトル */
#sidebar .sidebar-scroll .widget_categories .widget-title {
  color: #000;
  font-size: 1.2em;
  padding: 4px;
  border-left: none;
  border-radius: 0 0 0 0;
  border-bottom: solid 2px #000000;
}

目次カスタマイズ

見た目シンプルなh2下線とh3中黒しか使わない

/* 目次タイトル */
#sidebar .sidebar-scroll .widget_toc .widget-title {
  color: #000;
  font-size: 1.2em;
  padding: 4px;
  border-left: none;
  border-radius: 0 0 0 0;
  margin-top: 24px;
  border-bottom: solid 2px #000000;
}

/* h2見出しの前 */
#sidebar .toc-list>li>a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f103";
  font-weight: 900;
  padding-right: 5px;
  color: #000057;/* アイコンの色 */
}
/* h3見出しの前 */
#sidebar .toc-list>li li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  font-weight: 900;
  padding-right: 5px;
}
#sidebar .toc-list li a {
  font-size: 1.1em;
  font-weight: 600;
}
#sidebar .toc-list>li li a {
  font-size: 1em;
  font-weight: 500;
}
#sidebar .toc a:hover {
  color: #333;
  text-decoration: underline;
}

スクロール追随 ハイライト

Cocoonオリジナルの目次でコンテンツのスクロールに追随して目次の項目のハイライトも移動する
参考サイト名失念ですがほぼコピペコード

/* スクロール追随 ハイライト */
#toc-2 li.current {
	background-color: #DDDDDD99; 
}
$(function() {
  // ナビゲーションリンクを設定
  // #toc-2: サイドバーの目次ウィジェット
  // li: その各見出し
  // a: そのリンク
  const headerLinks = $('#toc-2 li a');

  // コンテンツの位置情報の配列作成
  // {
  //    top: 各見出しに対応するコンテンツの先頭位置
  //    bottom: 各見出しに対応するコンテンツの終了位置
  // }
  let contentsPos = new Array();

  // contentsPos の初期化関数
  function init() {
    for (let i = 0; i < headerLinks.length; i++) {
      // 見出し i のURL(アンカーポイント・リンク先)を取得
      // 通常「#toc1」のような id属性が得られる
      const headerID = headerLinks.eq(i).attr('href');

      // コンテンツ i の先頭位置
      const top = $(headerID).offset().top - 20;
      // コンテンツ i の終了位置
      // 暫定的に null を入れておく(後で更新)
      const bottom = null;

      // 配列として格納
      contentsPos[i] = { top: top, bottom: bottom };

      // コンテンツの下部の位置を調整
      if (i > 0) {
        // 前のコンテンツの終了位置 = 今のコンテンツの先頭位置
        contentsPos[i - 1].bottom = top;
      }
    };
    // footerの先頭位置を取得
    const footerTop = $("footer").offset().top - 20;

    // 最後のコンテンツの終了位置 = footerの先頭位置
    contentsPos[contentsPos.length - 1].bottom = footerTop;
  }

  // 初期化の実行
  init();

  // 現在位置を確認してコンテンツ位置に対応
  function currentCheck() {
    // 現在のサイト上部からの位置を取得
    const windowScrollTop = $(window).scrollTop();

    // 一旦マークを解除
    headerLinks.parent().removeClass('current');

    // 現在位置が全コンテンツ内にあるかチェック
    if (contentsPos[0].top <= windowScrollTop && contentsPos[contentsPos.length - 1].bottom > windowScrollTop) {
      for (let i = 0; i < contentsPos.length; i++) {
        // 現在位置がコンテンツ i 内にあるかチェック
        if (contentsPos[i].top <= windowScrollTop && contentsPos[i].bottom > windowScrollTop) {
          // class = "current"を aタグの親である li タグに設定
          headerLinks.eq(i).parent().addClass('current');

          break;
        }
      }
    }
  }

  // ロード・スクロール時に見出しをマーク更新
  $(window).on('load scroll', currentCheck);

  // アコーディオンが開閉したら座標更新
  $(document).on('change', 'input.toggle-checkbox', function() {
    setTimeout(init, 350);
  });
	
  // 目次が開閉したら座標更新
  $(document).on('change', 'input.toc-checkbox', function() {
    setTimeout(init, 550);
  });

});

Cocoon設定

・スキンを変更
とりあえずSimple‐Darkmodeに変更
style.cssに定義したダークモード設定が反映されないので一旦なしに戻しました

・段落の間隔調整
Cocoon設定の本文 – 本文行間設定 で本文余白の行余白を0.5emにする

・SNSシェア/フォロー設定
とりあえずボタンの表示設定を全部OFF

・フッターのコピーライト変更
Cocoon設定のフッター – クレジット表記

・パンくずリストの位置変更
投稿 – パンくずリスト設定 メインカラムトップに変更

アフェリエイト

アフェリエイト試してみたかったので、とりあえずロリポップの管理ページでおすすめされてたA8.netに登録
とりあえずロリポップとA8.netと連携してバナー表示

外観 – ウィジェット でページの一番下に表示したかったので投稿コメント下に[C] 広告を追加
2個横並びで表示させたかったので2つまとめてリンクをコピペ

サイトの構成

サイトの一部を消したり移動しやすいように、記事の大まかな内容ごとにWordpressを分けて作成
ただWordpressの設定とかが別々になるので管理が大変…

スポンサーリンク
タイトルとURLをコピーしました