addquicktag | 記事にソースコードを掲載する際のテクニック

code3

コードを書く度にpreタグとか[ code ]ショートコードを叩いている人向け

code5

上のように良く使う言語のショートコードを
ボタン一発で表示させるようにした方が効率よくありませんか?

ここではソースコードを表示するためのプラグイン
syntaxhighlighter evolvedについては特に説明しません。

今回、紹介するのはAddQuicktagプラグインです。

AddQuicktag

AddQuicktagとは、↓のように自分専用のボタンを配置するプラグインです。

code5

キーボード打つのがめちゃくちゃ早い人はいらないかもしれませんが、
コードを書くたびにpreタグや[ code ]ショートコードを書くのは面倒ですよね。

入力する内容が同じだったら、ボタンを押したらそれが表示されるようにする。
これで効率がグンと上がります!

では、さっそく導入しましょう。

AddQuicktagの導入

プラグインのインストールは他のプラグイン同様、
・プラグインページで検索する:「AddQuicktag」で検索
もしくは
プラグインサイトからダウンロードしてアップロードする
方法で導入してください。

AddQuicktagの設定

有効化されたら、さっそく設定しましょう。
設定メニューから「AddQuicktag」をクリックしてください。

code

そしたら、設定画面が出てくるので、
以下のように入力してください。

code4

・ボタン名* : 投稿エディタに表示されるボタン名を決めてください。
 分かり易い単語を入れましょう。良く使う言語とか 例)php,python,ruby

・ラベル名 : 他のボタンと区別するものです。
 なくてもいいですし、ボタン名と同じでもいいと思います

・開始タグ(s)* : ボタンを押したときに出力される開始タグを入力します。
 ここがポイントです。ここに毎回同じことを叩いている文を入力しましょう。
 codeショートコードなら↓のようなかんじで。
 (ただし、括弧とcodeの間のスペースを消してください)
例)

 [ code language="python" ]
 
 [ code ]

[ code language=”python” ] の”python”の部分に
良く使う言語も指定しましょう。

・終了タグ(s) : ボタンを押したときに出力される終了タグを入力します。
 開始タグでまとめちゃう場合は空でOKです。管理しやすくするなら開始と終了を分けた方が良いかもしれません。

・アクセスキー : アクセスキーを入力します。
 特に入れることがなければ空で良いと思います。

・順番 : ボタンの並び順を入力します。デフォルトの値は0。
 元々ある投稿エディタ画面のボタンの次に表示されます。
 0から若い数字の順にボタンが並びます。頻繁に表示使うボタンを若い数字にしましょう。

・ビジュアルエディタ : チェックがONになるとビジュアルエディタにも表示されます。

・各チェックボタン : ボタンを表示させたいどのエディタに表示するかを決めます。
 post:投稿記事のエディタにボタン表示
 page:固定ページのエディタにボタン表示
 comment:コメント作成ページにボタンを表示
 edit-comment:コメント編集ページにボタンを表示

[ code ]の場合、commentの部分はチェックを入れる必要はないでしょう。
私の場合、入れちゃってますがw

最後に、「変更を保存」ボタンを押して完了です。

ボタンの動作確認

メニューの「投稿」>「新規追加」で投稿エディタ画面を表示して
作ったボタンがあることを確認してください。

どうでしょう?動きました?

code5

非常に便利なので、他にも毎回同じことを書いている内容があれば
ボタン化しちゃいましょう。
私の場合は見出し:hタグをボタンにしています。

記事作成の効率化を図り、たくさん記事を書いていきましょう。

Sponsored link

便利な商品紹介

オムロン クッションマッサージャ(マッサージクッション) HM-341-BG ベージュ

意外と気持ち良い

富士通 FUJITSU ScanSnap iX500 (A4/両面/Wi-Fi対応) FI-IX500A

自炊するならやっぱり持っておきたい。せっかくスキャンするならOCR付きにしておくに越したことはない。

Zenback

コメント

ブックマーク

ブログランキング

ページ上部へ戻る