B級システムエンジニアの備忘録

インフラ・プログラミングなんでもやるぞ雑用エンジニアブログ

wordpress システム・技術情報

WordPress プラグイン oEmbed gist コード表示(gist上)プラグイン入れてみた

更新日:

はじめまして、B級エンジニアの太郎(仮)です。

ずーーーーーっとブログをはじめようと思っていたのですが、

コードだったり、ブログ作成ツールだったりと迷って結局はじめない日々を5年間悶々と過ごしていましたw

あとは正直技術力が低いので、恥ずかしい。。。というところで。。。

しかし、このたびきっかけを作っていただいた記事があります。

コードの表示部分をワードプレスに簡単に表示できるようにできたら、

こんな私でも作れるかなと思ったところ、本当に良い記事に出会えました。

↓↓↓↓↓↓↓↓↓これを見てください。

 

こんな自分でもすごくきれいにコード表示できました!

参考にさせていただいた記事はこちらです!!

https://rinare.com/wordpress-source-code-syntax-highlight-gist/

 

すばらしいものに出会えてよかった

 

で要約しますと。。。

gist上にソース等をアップして、それをサイト内に表示するということなんです。

しかも、プラグインやハイライト.js等を使用するよりも早いとの噂が。。。

GitHubに登録しよう!

登録はこちら↓

https://github.com/

gistへコードを登録しよう!

https://gist.github.com/

登録の仕方

 

①ファイル名(任意)

②インデントの挿入をタブにするかスペースにするか選択

③スペース何個分のインデントを入れるか(個人的には2,4が多いと思う)

④no warp =自動折り返しなし(横スクロールバーが出ます) soft warp=自動折り返し(スクロールバー出ません)

内容を書き終わったら、右下のCreate secret gist (URL直接アクセス可能)Create public gist(リストに表示され、検索に出る)

いずれかをクリックして作成完了をしてください。

その表示するためだけであれば、公開する必要はないので、secretでいいかなと思います。

secretはあくまでもURL公開しない(URLを知っている仲間内のみ公開みたいな感じ)のと検索エンジンのクローラーにインデックスされないようにするようになっているだけです。

あと、ブログ等に表示する際は極力soft warp設定がみやすいんではないかなーと思います。

ワードプレス用プラグインのoEmbed gistをインストールしよう

URLを編集画面にコピペ!

いかかでしょうか?すばらしいです。
一昔前まではこんなにも簡単にブログを始めれたでしょうか?

おすすめのプラグインのご紹介でした!

SEO対策について

なお、このoEmbed gistですが、一つ注意点として、
gist側に大事なコードや説明文章等を記述するので、おそらく検索エンジンのクローラーから読み取ってもらえないんじゃないかって思います。
なぜかといいますと、表示はされますが、外部サイトの記述をiframeのような感じで表示するので、
サイト内文章として読み取ってもらえないんじゃないかって思っています。
※ここは個人的な予想です。

なので、心配な方は別記事で紹介しているWP Code hightlight.jsを使用されて下さい。
WP Code hightlight.jsはあくまでもサイト内文章の表示をハイライト表示(コードエディターっぽい表示)をしてくれるプラグインです。

どちらもすばらしいプラグインです。

336

336

-wordpress, システム・技術情報
-,

Copyright© B級システムエンジニアの備忘録 , 2021 All Rights Reserved.