GitHub Gistの使い方:コードをWordPressに埋め込み共有する方法

GitHubのGistという、コードを管理したり、共有したり、ブログやサイトに埋め込んで公開したりできるサービスの使い方を解説します。

僕自身、ブログでコードを共有したいときにGistを使用しています。Gistを開くと一見難しそうに感じるかもしれませんが、実際使ってみるととても簡単なので、ぜひ参考にしてみてください。

スポンサーリンク

Gistでできること

Gistでは、主に以下の3つのことができます。

  • コードのバージョン管理
  • コードのブログへの埋め込み
  • コードの共有

では、それぞれについて説明します。

Gistの使い方

Gistの基本的な使い方

手順1. GitHubアカウントを作成

GitHubのTOPページ

まずは、GitHubのTOPページを開き、アカウントを作成しましょう。

アカウント作成途中にプランを選択する箇所がありますが、フリープランで構いません。

手順2. Gistを開く

Gistページへ

アカウント作成が完了したら、ログインし、GitHubトップページの上にある「Gist」をクリックします。

GsitのTOPページ

こちらがGistのトップページです。

手順3. 基本的な項目の説明

ここでこのページにあるそれぞれの基本的な項目について説明しておきます。

Gistの基本的な使い方
① Gist description

コードの説明を記載します。

② Filename including extension

拡張子を含めたファイル名を入力します。「test_code.php」というように拡張子を含めることで、その言語と紐づけされます。

③ 「Spaces」 or 「Tabs」

インデントをスペースにするかタブにするかを選択します。(よくわからなければ「Spaces」のままで構いません。)

④ 「2」 or 「4」 or 「8」

タブで挿入するスペース数を選択します。(よくわからなければ「2」のままで構いません。)

⑤ 「No wrap」 or 「Soft wrap」

右端まで来たら折り返すかどうかを選択します。「No wrap」だと折り返しなし、「Soft wrap」だと折り返します。

⑥ コードの入力欄

コードを入力します。

⑦ Add file

入力欄を追加する際に使います。

⑧ Create secret gist

非公開用のGistにする際にはこちらを選択します。

⑨ Create public gist

公開用のGistにする際はこちらを選択します。

手順4. Gistを作成する

では、実際にGistを作成してみましょう。

一例として、WordPressの自動ログアウト時間を変更するためのコードを記載してみました。そして「Create public gist」をクリックします。

Gistを作成

すると、Gistが保存されました。

Gistを作成

コードのバージョン管理をしてみる

コードのバージョン管理について説明します。

例えば、作成したコードを編集し、ちょっとした説明文を追加します。そして「Revisions」という箇所をクリックします。

コードのバージョン管理

すると、このように変更履歴を確認できます。

コードのバージョン管理

その後、やっぱり追加した説明文がいらないなと思い、説明文を削除します。編集後「Revisions」を見てみると、このように履歴が追加されます。

コードのバージョン管理

作成したコードをWordPressに埋め込んで共有してみる

では、作成したコードをWordPressに埋め込んで読者に見せたい場合の手順を解説します。

チェック

コードをWordPressに埋め込んで公開する方法として、プラグインを使用する方法もあります。しかし、プラグインを使用した方法だとページの表示が遅くなりがちです。そのため、WordPressでコードを公開する方法の一つとして、Gistを使用した方法はおすすめです。

作成したコードをWordPressに埋め込んで共有する場合は、まず赤枠で囲った部分をクリックします。この動作により、赤枠で囲ったボタンの左にちらっと記載してあるスクリプトがコピーされます。

GistをWordPressに埋め込む

WordPressの投稿編集ページのテキストエディタを開き、コードを埋め込みたい箇所に、コピーしたスクリプトを貼り付けます。例えばこのように記載してみます。

GistをWordPressに埋め込み共有

これを実際にはどのように表示されているか確認してみると以下のとおりです。

GistをWordPressに埋め込み共有

WordPressなどのブログでコードを共有する場合はこのようにして使用します。ちなみに、せっかくなのでこのコードを実際にここに埋め込んでおきますね。

作成したコードをURLで共有してみる

次は、作成したコードをURLで共有する方法を解説します。これは特定の人とコードを共有する場合などにおすすめです。

まず、「Embed」と書かれているボタンをクリックし、「Share」を選択します。

コードをURLで共有

そして、赤枠で囲ったボタンをクリックします。これにより共有用のURLをコピーできます。

コードをURLで共有

あとは、コピーしたURLを共有したい人に送ります。ここではブラウザをシークレットモードで開き、URLを開いてみます。すると、このようにコードのページが開かれます。

コードをURLで共有

最後に

今回はGistの使い方を解説しました。

コードの管理や共有、ブログへの埋め込みなどをする際に、Gistはかなり便利なサービスです。使い方も見た目ほど難しくなく、とても簡単なのでぜひ使ってみてくださいね。

KoSkywalker

もし「ここをもう少し詳しく教えて!」「ここ間違ってますよ!」などありましたら、ページ下のコメント欄からお気軽にお送りください。

もちろん、感想などちょっとしたことでも、お送りいただけるととても嬉しいのでお待ちしてます!

ABOUTこの記事をかいた人

主に、WordPress、SEO、CSS、面白そうなWEBサービスについて発信しています。また、プライベートの話として、チャレンジしたり、購入してみたり、行ってみたり…。実際に体験したこともお届けします!どうぞ楽しんでいってください!SNSフォローもよろしく!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です