2019年4月22日プログラミングの記事を書きたいな。記事にソースコードを埋め込みたいんだけど、どうしたらいいんだろう?できればプラグイン無しでできるといいんだけど。WordPressのプラグインという選択肢もありますが、プラグインが増えすぎると管理が大変ですし、サイトが重くなる原因にもなります。GitHubのGistを使うことで、プラグイン無しで簡単にソースの埋め込みができます。この記事では、Gistを使ったソースコード埋め込みの方法と、カスタマイズする方法をご紹介します。目次Gistの使い方Gistのページに移動するソースファイルを作成する貼り付け用のコードをコピーするコピーしたコードを記事に貼りつけるGistのカスタマイズカスタマイズのための準備ソースコードの一部だけを表示するソースコードの一部をハイライトするフッターを非表示にする行数を非表示にする背景色を統一するフォントを変更する無駄な余白や線を削除まとめGistの使い方Gistを使うには、GitHubに登録する必要があります。無料となっており、必要なものはメールアドレスだけです。※GitHubのユーザ登録については、本記事では割愛します。Gistsを選択します。Gistのどちらかを押して登録します。secretは、検索エンジンに引っかからないだけで、公開状態ではあるので、どちらでもOKです。貼り付け用のコードをコピーする保存後、右上にコピー用のボタンがあるので、クリックするとコピーされます。コピーしたコードを記事に貼りつける記事作成ページにそのまま張り付けます。これだけ!とっても簡単です!実際表示すると、以下のように表示されます。ソースのコピーもできますし、色がついていて見やすいです。これだけでも十分ですが、カスタマイズも可能です。Gistのカスタマイズカスタマイズ無しでも十分なのですが、いろいろと要望が出てきます。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記述で解決です。個人的にはプラグインを入れなくても満足いく状態に表示できていると思っています。Wordpress執筆者:shiori関連記事floatが効かない...CSSではまったので対処法などまとめあれー、float:left;って指定しているのに全然効かないよ...?と、少しはまってしまった。試したけどなかなか正解に辿り着けなかったので、対処を載せておきます。他の人のブログをいろいろ見ていると、吹き出しを使って会話形式で進めていくスタイルに出会うことがあります。...WordPressをインストールしたのに固まる・白い画面・何も表示されないときの対処法WordPressをいろいろいじるために、開発環境が欲しくなり、ローカルに環境を作ってそこでいろいろ試すことにしました。...もしもアフィリエイトのかんたんリンクをカスタマイズ!ボタン色やテキスト変更などもしもアフィリエイトのかんたんリンク、とても便利ですよね。商品検索して、選んで、スクリプトを記事に貼りつけるだけで、カエレバのようなボタン付きリンクが作成できます。GistでPHPがハイライトされないプロフィール運営者:シオリ法学部卒→システムエンジニア(SE)としてSI企業に9年勤めてます。結婚後、共働きで仕事と家事に追われる毎日に疑問を持ち、ひとり働き方改革中。プログラミングとイラストとおいしいご飯とゲームが好きな超インドア派です。アイキャッチなどのイラストはスマホの無料アプリ使って自分で描いています。当ブログは、私が勉強したことや日々の暮らしの中で考えたことなどを発信する雑記ブログです。同じ壁にぶつかっている方のお役にちょっとでも立てればうれしいです。