WordPress

WordPressでソースコードを記事内に表示させたいときにプラグインを使わずに埋め込む方法

ビジネスでお金を生み出す日下部です。(^^)
ブログで、あなたの稼ぎになる情報を発信しています。

 

記事にソースコードを貼り付けて紹介したい場合ってありますよね?

ソースコードは直接記事に貼り付けると、うまく表示されないときがあります。

 

この記事ではプラグインを使わずに、ソースコードを貼り付ける方法について紹介します。

 

GitHubの機能「Gist」を利用する

ソースコードを貼り付けるには、プラグインを使用する方法もあります。

ですが、ソースコードを貼り付けるためだけに、プラグインを増やしたくない場合もあります。

 

その場合は、今回ご紹介するGitHubというウェブサイトを利用しましょう。

GitHubを簡単に説明すると、プログラムコードをウェブ上に公開・閲覧できるウェブサービスです。

有料なプランもありますが、基本的に無料で利用が可能です。

 

そして今回利用するのが、GitHubにある機能の中の一つである「Gist」を使ってソースコードを貼り付けします。

ちなみにこのGistは、短いコードを管理できるサービスです。

 

それでは、まずGitHubを利用するためにアカウントの作成に入りましょう。

アカウント作成は英語ですが、3ステップなので登録はとても簡単です。

 

それでは、アカウント作成の流れについてご紹介していきます。

GitHubアカウント作成の流れ

 

アカウントの登録方法を図解で解説するぜ・・・ムキッ!

 

GitHubのウェブサイトへアクセスしてください。
https://github.com/

 

すると次のような画面が出てきますので、
➊ユーザーネーム
➋メールアドレス
➌パスワード
の欄を入力していきましょう。

 

入力が終わったら➍「Sign up for GitHub」をクリックして次へ進みます。

ここまでで、Step1が完了しました。

 

 

Step2では、プランの選択をします。
特に理由がなければ➊の無料プランを選択し、➋をクリックして次へ進みましょう。

 

Step3はアンケートですので、答えても良いですし、そのまま「Submit」をクリックして飛ばすこともできます。

 

Step3が終わったら一旦メールを確認しましょう。

登録をしたメールアドレスに、GitHubから確認用メールが届いているはずです。

 

メールの中にある「Verify email address」のリンクをクリックしてください。
切り替わった画面で「Your email was verified.」とあれば、メールアドレス確認の成功です。

 

以上の3ステップで、アカウントは作成されました。
さっそくGistを利用してブログにソースコードを埋め込んでいく作業に移りましょう。

Gistでブログにソースコードを埋め込む

Gistにアクセスをしてください。
https://gist.github.com/

 

すると次のような画面に切り替わります。

 

上から順に画面の解説をしていきます。

➊コードの説明
書かなくても良いようですが、出来るなら書いておきましょう。

➋ファイル名
拡張子まで入力してください。

➌ソースコード
ここに埋め込みしたいコードを入力してください。

 

すべて入力したら、AかB、どちらか選びクリックしましょう。
A・・・URLを知らないとコードが見れない設定(ブログ閲覧者はもちろん見れますよ!)。
B・・・GitHubにも公開する設定なので、ブログ閲覧者でなくても見れてしまいます。

 

ブログへの埋め込みが目的ならどちらでもOKです。

迷ったらAをクリックしてコードの生成をしてください。

 

ここまで出来たら、ソースコードの埋め込みです。

 

上の画像の赤枠部分が「Embed(埋め込み)」になっていることを確認します。

確認したら、その右側にあるコードをコピーしてください。

 

コピーしたコードを記事に貼り付ければ、これで埋め込みが完了です。

 

 

そして以下が、実際に記事に貼り付けをしたときの表示になります。

 

以上がプラグインを使わずに、ソースコードをWordPressの記事内に貼り付ける手順になります。

まとめ

プラグインを増やしすぎると、サイトが重たくなる原因に繋がたり、プラグイン同士が干渉して動作に支障をきたす場合があります。

 

ソースコードを記事に貼り付けるだけのために、プラグインを増やしたくない場合には、ウェブサービスを利用すると、これらの問題を解決することができるでしょう。

 

一度使えば、手順は覚えられるくらい簡単に利用することができるので、ソースコードの紹介をしたい場合には使ってみてくださいね!

ABOUT ME
Qusakabe
趣味:筋トレ、ゴルフ、麻雀、ネット、息子(2)・娘(0)と遊ぶこと。 12時間以上拘束されるのに残業代も一切でない超どブラック会社を2社経験。 「会社ってこんなものなのか・・?」っと疑問を抱き、「これだけ頑張れるなら自分で起業してもそこそこやっていけるだろう」と感じたことから起業を決意。 現在は、法人7期目の代表取締役を継続中。 ウェブで稼ぐための情報を発信しています。