CSS Wordpress

簡単!ブログ記事にプログラムをプラグイン無しで埋め込む方法

投稿日:

Gistを使って記事にプログラムを埋め込む方法
プログラミングの記事を書きたいな。
記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう?
できればプラグイン無しでできるといいんだけど。

WordPressのプラグインという選択肢もありますが、プラグインが増えすぎると管理が大変ですし、サイトが重くなる原因にもなります。

GitHubのGistを使うことで、プラグイン無しで簡単にソースの埋め込みができます。

この記事では、Gistを使ったソースコード埋め込みの方法と、カスタマイズする方法をご紹介します。

Gistの使い方

Gistを使うには、GitHubに登録する必要があります。

もちろん無料となっており、必要なものはメールアドレスだけです。

※GitHubのユーザ登録については、本記事では割愛します。

Gistのページに移動する

GitHubにログイン後、右上のメニューから、your Gistsを選択します。

your Gists

ソースファイルを作成する

必要事項を入力して、Create secret Gist または Create public Gistのどちらかを押して登録します。

Gistにソースを登録する

secretは、検索エンジンに引っかからないだけで、公開状態ではあるので、どちらでもOKです。

貼り付け用のコードをコピーする

保存後、右上にコピー用のボタンがあるので、クリックするとコピーされます。

Gistの貼り付け用スクリプトをコピーする

コピーしたコードを記事に貼りつける

記事作成ページにそのまま張り付けます。

これだけ!とっても簡単です!

実際表示すると、以下のように表示されます。

記事にプログラムを埋め込む

ソースのコピーもできますし、色がついていて見やすいです。

これだけでも十分ですが、カスタマイズも可能です。

Gistのカスタマイズ

カスタマイズ無しでも十分なのですが、いろいろと要望が出てきます。

  • 全体の内の一部分だけ表示したい!
  • 表示している内の一部分だけ背景色を変えて目立たせたい!
  • フッターを非表示にしたい!(hosted with ❤ by GitHubの部分)
  • 行番号を非表示にしたい!

などなど。

上記の要望に関するカスタマイズ方法をご紹介します。

カスタマイズのための準備

指定した行のみ表示したり、指定した行のハイライトをするためには、gist-embedを使用します。

このスクリプトは、CDNにあがっているので、これを読み込みます。

読み込みについては、通常scriptタグで直接HTMLに書き込みますが、Wordpressはwp_enqueue_scriptを使って読み込むことが推奨されています。

※各種プラグイン等との競合(コンフリクト)の発生を防ぐためのようです。

なので、function.phpに読み込み用のソースを追加します。

コピペで追加でOKです。

ソースコードの一部だけを表示する

先ほど埋め込んだプログラムの、bodyの部分だけ抜き出してみましょう。

codeタグに、data-gist-id(表示するGistのID。GistのページのURLになっています)とdata-gist-line(表示する行)を指定します。

今回は5行目から8行目までを表示したいので、このように書きます。

これを表示するとこのようになります。

こうすることで、必要な部分だけ抜粋して載せることができるので便利です。

カンマ区切りにすると、複数行を抜粋することができます。

ソースコードの一部をハイライトする

次に、body部分をハイライトしてみましょう。

codeタグに、data-gist-idとdata-gist-highlight-line(ハイライトする行)を指定します。

これを表示するとこのようになります。

単に行数で説明するよりも、強調したい部分が視覚的にわかりやすくなります。

カンマ区切りにすると、複数行をハイライトすることができます。

フッターを非表示にする

codeタグに、data-gist-idとdata-gist-hide-footer=”true”(フッター消す)を指定します。

もし、常にフッターは非表示にしたい!という場合は、CSSに記述すると楽です。

data-gist-hide-footer=”true”を指定しなくても非表示になります。

行数を非表示にする

codeタグに、data-gist-idとdata-gist-hide-line-numbers=”true”(行数消す)を指定します。

もし、常に行数は非表示にしたい!という場合は、CSSに記述すると楽です。

data-gist-hide-line-numbers=”true”を指定しなくても非表示になります。

背景色を統一する

デフォルトでは、1行ずつ交互に背景色が変わっていますが、個人的には同じ色のほうが見やすい。

なので、CSSに以下の記述をすることで、色を統一します。

※背景色については、gist-embedは関係ないので、CSSへの記述のみで実装できます。

フォントを変更する

フォント、サイズを調整します。これもCSS記述で変更できます。

無駄な余白や線を削除

違和感のある空白や線が残ってしまったので、これも削除します。

これもCSS記述で解決です。

まとめ

以上です。

個人的にはプラグインを入れなくても満足いく状態に表示できていると思っています。

プログラムソースをブログ記事に表示したいと思っている方、ぜひ試してみてはいかがでしょうか?

-CSS, Wordpress
-, ,

執筆者:

関連記事

floatが効かない…CSSではまったので対処法などまとめ

あれー、float:left;って指定しているのに全然効かないよ…?と、少しはまってしまった。いろいろ試したけどなかなか正解に辿り着けなかったので、対処を載せておきます。 floatに限らず、 CSS …

WordPressをインストールしたのに固まる・白い画面・何も表示されないときの対処法

WordPressをいろいろいじるために、開発環境が欲しくなり、ローカルに環境を作ってそこでいろいろ試すことにしました。 そこで、Xammpをインストールして、そこにwordpressを入れようとした …

【コピペOK】CSSで会話形式の吹き出しを作る方法

他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。 文字だけの文章に比べて、とても読みやすく、自分も使ってみたい!と思ったことはないでしょうか? …

もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更など

もしもアフィリエイトのかんたんリンク、とても便利ですよね。 商品検索して、選んで、スクリプトを記事に貼りつけるだけで、カエレバのようなボタン付きリンクが作成できます。 ですが、ボタンが全部同じ色だった …

プロフィール

運営者:シオリ

法学部卒→システムエンジニア(SE)としてSI企業に9年勤めてます。結婚後、共働きで仕事と家事に追われる毎日に疑問を持ち、ひとり働き方改革中。
プログラミングとイラストとおいしいご飯とゲームが好きな超インドア派です。
アイキャッチなどのイラストはスマホの無料アプリ使って自分で描いています。

当ブログは、私が勉強したことや日々の暮らしの中で考えたことなどを発信する雑記ブログです。同じ壁にぶつかっている方のお役にちょっとでも立てればうれしいです。
お仕事依頼・ご相談はお問い合わせまたはツイッターDMからどうぞ!