パンくずやシンタックスハイライターなどの導入(WordPress更新情報)

鳥二匹

今回行ったこと

  • シンタックスハイライターを導入し、埋め込んだコードを見やすく
  • パンくずリストの導入
  • トップページに最新記事が表示されるように
  • 既存記事にアイキャッチ画像、追記設定を付与
  • メニューの変更
  • CSSの一部変更(背景や見出しタグなど

コードを見やすく

シンタックスハイライターとして、crayon-syntax-highlighterを導入しました。
コードを表示崩れ等なく表示してくれる優れもの。
これからこのプラグインを利用してコードをガンガン記録していこうと思います。

パンくずの追加

クローラにとってもユーザーにとってもわかりやすいパンくずにします。

HTMLの出力

  • トップページでは、「非表示」
  • その他のページでは、「トップ > カテゴリ(繰り返し可能) > 記事」

という構造にしました。共通ヘッダーに下記を追加しています。Scheme.orgにも対応済です。

	<!-- #breadcrumb -->
	<nav class="breadcrumbs">
	<div id="breadcrumb">
		<ul>
			<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
				<a href="<?php bloginfo('url'); ?>" itemprop="url">
					<span itemprop="title"><?php bloginfo('name'); ?></span>
				</a> ›
			</li>
			<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
				<a href="<?php $cat = get_the_category(); echo get_category_link($cat[0]->cat_ID); ?>" itemprop="url">
					<span itemprop="title"><?php echo $cat[0]->name; ?></span>
				</a> ›
			</li>
		<li>
			<?php the_title(); ?>
		</li>
		</ul>
	</div>
	</nav>
	<!-- #breadcrumb -->

 

#breadcrumb ul {
 display: flex;
 padding: 5px 0;
 font-size: 0.8rem; 
}

#breadcrumb ul a {
 text-decoration: none;
}

トップページと既存記事の変更

  • トップページに既存記事が出てくるように設定変更。
  • 既存記事に追記設定を追加。
  • 既存記事の1stViewにアイキャッチ画像を追加。
  • class=”entry-title”のプロパティ更新。
  • アイキャッチ画像の出現位置を変更(後日)

ここまで全部やって、 ウェブマスターツールで

  • サイトマップXMLのアップ
  • Fetch as Google

の2点を行った。

まとめとこれから

  • 疲れた。
  • パンくずで独自のPHP組めたのは嬉しい。
  • つぎはentry-h3のCSS書かないと。
  • あと執筆環境の整備もしたい。
  • コードの改行が勝手に変えられることを改善したり、クラス指定を簡略化したり。
  • 本名でこのサイトかかるようにプロフィールページ作りたい。
  • キャラが定まってない。記事によって敬語だったり敬語じゃなかったりする。統一した方が良いかも。