モデル募集バナー1

写真家 NORIO TAKAHASHI
“Portrait” Collection

Blog

プラグイン無しでwordpressにソースコードを表示する方法

ご覧頂きありがとうございます。

更新もされていて使い勝手も良く、表示も綺麗なソースコード表示プラグインの定番

Crayon Syntax Highlighter

良いのですが、、、重いです。

今回はその代替えのご提案です。

Gist を使う(無料)

Github の Gist を使います。

なんとなく敷居が高いなと思っていたのですが使い方も簡単で使いやすいです。

ぜひご活用頂ければと思います。

登録手順と使い方

GitHub  https://github.com/

アクセスして頂いて、右上の「Sigh up」をクリック

github のサイトに登録

  1. 名前
  2. メールアドレス (認証メールが届くので正確に)
  3. パスワード

Unlimited public repositories for free」が選択されていることを確認し、「Continue」をクリック

「skip this step」をクリックします。

次にメールアドレスの認証をします。

メールアドレスの認証

今回は iPhone から認証してみました。

認証メールが届きます。

クリックしてアクセスし、ログインします。

ログインするとメールアドレスの認証が完了し登録が完了です。

埋め込みコードの作成

Gist で、埋め込み用のコードを作成します。

Gist にアクセス

ログインしてから、右上のところより「Your Gists」をクリック

コードの記述とスクリプトの作成

Gistの中で区別出来るようにわかりやすい名前にしましょう。

ファイル名は貼り付けた時にも表示されます。

今回は、.htaccess としています。

記入後、赤枠内の「非公開で保存」「公開して保存」のどちらかを選択します。

WordPress記事内にコードを表示するだけなので、どちらでも大丈夫です。

保存できると上記画面になります。

赤枠内のURLをコピーします。

記事への貼り付け、表示の確認

記事内にコードを貼り付けます。テキストエディタで貼り付けして下さい。
プレビューで確認後、位置などを調整して公開!!

プレビューでコードが表示されない時は、ブラウザの再読み込み(リロード)をして下さい。ちゃんと表示されます。
 
 

参考にさせて頂いたサイト様です。

ItsukiLog | WordPressカテゴリー記事一覧

まとめ

wordpress や プラグインの更新も心配が一つ減ります。
表示も早くて、見易いですしハートマークが愛らしいです。

ご参考にして頂けると幸いです。

お品書き

モデル募集