Wordpress│でろぐ

でろぐメインコンテンツ

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

自分用メモ。使える用途は限定的でもいけてんじゃねと思うWPプラグイン2個

最近忙しさにかまけてブログを更新放置しておりますよ。
まあそれはそれで仕方ないといいつつ、自分なりによいものを見つけたのでメモ。
まあただのWordpressのプラグインです。
こいつはいいなって思えるものが2つあるので紹介します。

1.カテゴリごとの記事の表示順を制御するプラグイン「AStickyPostOrderER」
とある案件でTOPページとかに表示する記事の表示順を時系列ではなく任意で選びたいという要望があったのでいつもならテーマ側で制御したいところですが調べてみるとけっこう厳しい感じだったのでプラグインに任せる事にして見つけたのがAStickyPostOrderER

使い方は簡単でサイドメニューのツール→AStickyPostOrderERをクリック
次に表示させたい順を該当するカテゴリから選択するとそのカテゴリ内の記事リストが出るので各項目の画面右端にあるテキストボックスに数値を入力して表示順を制御できるという感じ。

けっこう簡単で要望もクリアできてすっきり。
インストールは以下URLから直接でもいいし、プラグインディレクトリに追加されてるのでAStickyPostOrderERって検索してもおk
http://wordpress.org/extend/plugins/astickypostorderer/

2.カテゴリごとの日付アーカイブを表示するプラグイン「Archives for a category」
続いてもカテゴリ関係w
このプラグインは日付アーカイブのリストを表示する際に特定のカテゴリのみを出力するためのプラグイン。
WPの構成によってはアーカイブのリストが必ずしも全て見えて欲しくない場合もあるわけでその時とかArchives for a categoryは役立ちますね。

使い方も簡単。テーマファイルに

って書いて任意のカテゴリIDをふってあげればおk
特定のカテゴリのみの日付アーカイブを出力する機会もそうないと思うけどあった場合に役に立つと思います。
ただ注意点があって日付アーカイブの特性上パーマリンクがデフォルトの?=idじゃない場合は出力しないらしいので設定→Kwebbleをクリックして Disable canonical URLs. にチェックを入れて更新しましょう。これでパーマリンクの値が変わってても正常に出力するようになります。

インストールは残念ながらプラグインディレクトリに登録されてないっぽいので直接以下からダウンロードしてFTPでうp
http://kwebble.com/blog/2007_08_15/archives_for_a_category

使い方に癖がある2つのプラグインだけど、用途限定でかなり便利になるので知っておいて損はないと思います。

参考記事
投稿記事の表示順を変更できるプラグイン「AStickyPostOrderER」
カテゴリーごとの日付アーカイブを表示する WordPress プラグイン – 「Archives for a category」

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressのカスタムタクソノミーの使い方

個人用メモ。
重い腰を上げてWPのカスタムタクソノミーを使ってみた。
やっぱりプログラム的な事は全く得意でないのでメモしておかないと忘れちゃうw

めちゃカスタムタクソノミー初心者向けなので(僕がそうなので)もっとこうしたらいいというご意見があると助かります。
で、カスタムタクソノミー(カスタム分類ともいうそうですな)の使い方の前にどう使うか。
今回の場合は複数の検索条件から指定した条件で検索させたいなという場合。
普段ならタグですませるところやけど、せっかくなのでカスタムタクソノミーで実装してみようという事に。
プラグインで実装する方法もあるらしいけどプラグインに依存すると引越しとかの時にめんどいのでやっぱりテーマで作りたいところ。
以下が手順でございます。

1.function.phpに追記
まずは動かすための初期設定としてfunction.phpに以下をコピペしましょう。
名前とかは使う用途に合わせて変更すればおk

// カスタムタクソノミー追加
function create_custom_taxonomies() {
    register_taxonomy(
        'image', // 内部的な分類名
        'post',  // 適用する投稿タイプ
        array(
            'label' => 'イメージ',    // 表向きの分類名
            'hierarchical' => true, // 階層構造
            'query_var' => true,
            'rewrite' => true
        )
    );
    register_taxonomy( // 二つ目の分類を追加する場合
        'sene',
        'post',
        array(
            'label' => 'シーン',
            'hierarchical' => true,
            'query_var' => true,
            'rewrite' => true
        )
    );

増やす場合は下のregister_taxonomy以下をコピペで増やしたらいくつも出来るよ。
うまくいくと下のように投稿画面と管理画面にカスタムタクソノミーの追加画面が出てきます。
投稿画面
投稿画面はこんな感じ。タグを追加するイメージで分類できますよ。

管理画面
管理画面にもこんな感じででてきます。
名前やスラッグの管理もタグと同じノリできる感じです。

2.single.phpに追記
下準備が出来たので次は実装。今回は個別ページに埋め込みたかったのでsingle.phpに以下を追記

リスト構造でパーマリンクも出す場合

ID, 'image', '
  • ', '
  • ', '
' ); ?>

リスト構造でテキストだけ出力する場合

ID, 'image') ) {
    echo '
    '; foreach ( $terms as $term ) { echo '
  • ' . esc_html($term->name) . '
  • '; } echo '
'; } ?>

注意点としてはループ内に記述しないといけないというところ。

3.taxonomy.phpを作成
テキストだけ出力する場合はここまででいいんですが、今回は検索させる事が目的なのでパーマリンク作ってあげないといけないのでパーマリンク用のファイルを作る必要があります。
ここがいまいち分かりにくいポイントなんですけど、テーマ内にtaxonomy.phpという名前のファイルを追加すれば大丈夫です。
taxonomy-image.php
taxonomy-image-consaba.php
のように各ターム、スラッグ別のファイル名にしてあげるとそれぞれでテーマを管理できるみたいですけど今回は一覧が作りたいだけなのでtaxonomy.phpでおk。
ここのネーミングルールの部分が初心者には分かりづらいです。

まとめ
以上で完成です。
意外と簡単に出来たっぽくみえるけど、検索方法がよくないのかドキュメントが足りてないのかカスタムタクソノミーに関する記述があんまり多くないor専門的過ぎる為結構時間かかってしまったのが印象。
Wordpressはphpできる少しプログラムできる人だと色々できると思うんだけど、僕みたいにデザイナー脳だとちょっとつらいな。
ということでこれからも初心者向けの情報を出して行こうと思います。自分の為にも。

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressでユーザーのアイコンを表示させる方法

でろぐは今まで僕が記事を書いて妻が写真を撮って子供達が被写体になるというのが基本的なスタンスだったんですが、今後は妻にも記事を書いてもらおうという事になりました。
そこでユーザーの設定をしたまではいいんですけれども、どうせなら記事別に誰が書いたのかをユーザーアイコンで表示しちゃおうと思ったんです。
が、よく思い出してみるとたしかそのアイコンを設定するのってアバター(Gravatar)ってやつに登録しなくちゃいけないんでした。
でもはっきりいってめんどくさい。
そこで自分で作ったユーザーアイコンを記事に表示させる方法を紹介します。

方法はいたって簡単。
このコードを表示させたい位置に入れればおk

この場合だとテーマファイルの中にimgってディレクトリを作ってユーザー名の名前のjpgをアップロードすればいいです。
これが簡単でいいね!
しかも自分の好きなサイズで表示できるからデザインの自由度も高いしおすすめ。
で、こんな感じになりましたよ

こんな感じで表示したった!

好きな場所に呼び出せるし自分で好きなように出来るのでアバター設定とかめんどくさいけどWordpress上でユーザーアイコンを表示させたいなと思う人は是非試してみてね!

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressのエディタで改行を無効化するプラグイン

今日は久々にWordpressのプラグインネタ。
今日仕事の時にWordpressでちょこちょこっとやってたら、こんな事につまずきました。
それはエディタを切り替えたら改行とかがおかしくなったという事。
Wordpressの改行がエディタであんまり具合がよくないというのは分かってたんですが、ブログを書く程度ならまあルールで吸収できるんですが今回の場合はちょっとどうしようもなかったのでプラグインにお願いしました。
今回助けてもらったプラグインがPS Disable Auto Formattingというプラグイン。
WordpressのHTMLエディタで自動整形する機能を無効化してくれるプラグインです。
これを有効化するとHTMLエディタで改行してもpやbrが出力されずにエディタ内でのbrが反映されるようになります。
これでbrを多用するであるとか、細かい調整とかを全てコントロールする事ができるようになるのがいい感じです。

WordPressのフォーラムにある説明文を引用

「HTML編集モードでコードを記述したら、改行が消えた。。。」
「正しいコードを書いたのに、貼り付けたら入れ子構造がおかしい不正なコードになってしまっている。」
「ビジュアルモードとHTMLモードを切り替えると改行が消える」
などなど、HTMLモードでの編集は大変気を遣う必要があります。

PS Disable Auto Formattingは、これら自動整形に起因する問題を解決するだけでなく、ビジュアルエディタでの編集をも可能にし、よりWordPressの使い勝手を向上させます。

また、すでに作成済みの記事がある場合への対応として、一括整形処理機能を搭載しています。
本プラグインを有効化すると、元来段落や改行を付加していた処理が行われなくなるため、作成済みの記事の表示が変わってしまいます。これを簡単に修正するための機能が一括整形処理機能で、最終更新時刻が指定時刻以前となっている全ての公開・下書き・レビュー待ちの記事内容を段落・改行付きに整形します。

機能

投稿・コメント・抜粋・説明、各エリア毎の自動整形停止
HTMLモード利用時のp, brタグ除去回避
作成済み記事に対する一括整形処理

との事。
適用したら過去記事が未整形になってしまって表示が崩れるところを回避するための一括整形処理があるのはうれしいです。
とはいえいきなり実装も怖いので僕のどうでもいいテスト環境で実験しましたがきちんと一括整形もされていたので安心しました。
念の為バックアップを取ってからプラグインの有効化をした方がいいとは思います。

インストールは簡単でPS Disable Auto FormattingはWordpressのプラグインディレクトリに登録されてるのでプラグインの新規追加ボタンからPS Disable Auto Formattingで検索すれば出てきますので、あとはインストールして有効化するだけです。

基本的には整形してくれる前提でpやbrが入る事を想定してコーディングしてるので特にこれまでの分にどうこうという話でもないんですが、今後の案件とかでCMSとしての利用色は強い場合などには役に立ちそうです。

あと、このプラグインをもにょもにょしてる時に思ったんですが元々からWordpressにHTMLとか書いてあるからタグ打つ感じで対応しようとしてるのに自動整形されて自分で書いたHTMLが無効化されるのってどうなんやろって思いました。
それなら最初からHTML・ビジュアルという2つじゃなくてHTML・改行自動変換・ビジュアルとかの3つのパターンのエディタを用意してくれたらそもそもプラグインで対応する必要もなかったのにと思うわけです。
ということで次回のバージョンアップにこういう変更があるとうれしいなという超個人的な意見でしたw

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordCamp KOBE 2011に参加してきたよ

今日はWordCamp KOBE(神戸) 2011に参加してきました。
WordCamp KOBE(神戸) 2011

前々から気にはなっていたもののどうしようかなと決めかねていましたが、当日になって妻が言った「行ってきたらいいやん」の一言が決定打になって当日申し込みの当日参加してきましたw
開催場所が神戸芸術工科大学だったのですが、場所は神戸地下鉄の学園都市駅という場所でかなり遠めでした。
この駅の一歩手前の総合運動公園は仕事の関係で何回か来たことがありましたが、やっぱり何回来ても遠いもんは遠い!
おまけにものすごい暑さでかなりスタート時点で参ってしまってましたが、始まってから話を聞いてたら来てよかったなと思いました。
WordCamp KOBE(神戸) 2011の入り口
神戸芸術工科大学にあるWordCamp KOBE(神戸) 2011の入り口は分かりやすかったです。

会場に着くと既にすごい人でした。
それもそのはず参加人数は公式サイトによると700人オーバーで過去のWordCamp史上最大規模だったようです。
そんな訳でセミナー会場はずっと立ち見が出るほどの大盛況でした。
会場の様子
今回サイトのデザインを担当された@rie05さんの時とかものすごい人でした。

色々なセミナーの内容を見て回ろうかと思いましたが、あまりにも人が多いのとその分の熱気で立ち上がる気力も起きなかったのと、けっこう自分が見たいのがDesigner’s Cafeに集中していたのもあって最後の方までずっと同じ席で見てましたが、色々考えさせられるところもありとてもいい刺激になりました。
今回は用事もあったので懇親会には参加しませんでしたが懇親会もきっと盛り上がっていたと思うのでまたあれば参加してみようと思います。

シールをもろた
今回もノベルティーをたくさん頂きました。シールとかあとシールとか、シールとか。

色々な意味で暑くて大変なイベントでしたがおかげでとても有意義な一日になりました。
主催者の皆さん、参加者の皆さんお疲れ様でした!

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressでパーマリンクからindex.phpを消す方法

今日は仕事で少し困った事態になったんですけど何とか回避する方法を見つけたのでそれを忘れないようにメモします。
その困った事というのがWPでのパーマリンクの設定。
WPのデフォルトのパーマリンクは?p=123という感じで記事のナンバリングなわけですがP=が入っているので動的ファイルという風に検索エンジンに思われちゃうかもしれません。
あと個人的に好きじゃないんです。
なのでパーマリンクには拘りたいところです。
やはり個人的に好きな構造のカテゴリ名/エントリ名/という形にしたいと思うわけです。
で、その構造にしようとしたらWPの管理画面のパーマリンク設定でカスタム構造にチェックを入れて

/%category%/%postname%/

と記述すればいいんですが、ここで詰まりました。
何とこの設定をしたあとでサーバー側の設定によって分岐する事が分かったんです。
1つはそのまま設定が通るパターン。
これは何の問題もないです。実にスマート。
で問題がもう一個のパターン。
なぜか

index.php/%category%/%postname%/

のような感じでindex.phpが表示されるパターンです。
こっちが結構やっかいでindex.phpを消してもパーマリンクが表示されないばかりかタグの検索やpunycode変換までもがキャンセルされるというひどい事になってしまいます。
(まあパーマリンクが存在しないのでここの部分が正常に動いてもたいした意味はないんですけど。)

で、色々調べた結果.htaccessファイルを変更してアップしてあげれば修正分が適用されるという事が分かりました。
実際の.htaccessの記述は以下のような感じです。
(以下の例はWPのインストール箇所がドメイン/wpの場合で、ドメイン/で表示させる場合です。)

php_flag mbstring.encoding_translation off
php_value default_charset "UTF-8"

# BEGIN WordPress

RewriteEngine On
RewriteBase /wp/
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]


# END WordPress

これでパーマリンクの設定が完了して正常に表示され、タグの検索やpunycode変換も正常に動作するようになります。
あと、1点だけ注意が必要で最後の行のRewriteRule . /index.php [L]の部分の.と/の間の半角スペースを消すと正常に動作しません。
ものすごく細かいですがここでかなりの時間格闘しましたw
ちなみに今回使用したサーバーはファーストサーバーさんなのでたぶんファーストサーバーさんはこの設定でいけると思います。
あと他に動作を確認しているのはヘテムル、コアサーバー、ハッスルサーバーです。他のサーバーで動くかどうかは分からないので実際に試してみる方は自己責任でやってみてください。

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressの最上段にでてくる空白を消す方法

結構前から気になってた問題が解決したのですっきり!
(知ってる人からしたらたぶん今更感満載な事ですけどね)

それはWPで作ったブログの最上段に出てくる謎の空白の消し方。
まあ謎でもなんでもなくて管理画面へのショートカット的な奴が出たり出なかったりという実に不安定でうざいったらないやつだったんですけどやっと消し方が分かりました。
やり方は簡単。
管理画面に入ってメインメニューからユーザーを選んで
「管理バーの表示」にある「サイトを表示する際」のチェックをはずすだけという・・・。
ここのチェックを取るだけとかどういうことやねんと思いますよ。ほんまにね

てかデフォルトでここにチェック入れるのやめて欲しい。
だってこっちはヘッダー部分とかに勝手に変な白場のマージンなんか入れて欲しくないわけだし。
なんにせよすっきりしてよかった!

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

ブログの高速化?WPプラグインで画像を外注化

今日はまたWPのプラグインの紹介なんですけど、その前に最近考えてるサイト・ブログの高速化について少しまじめに書きます。

サイトやブログを表示する時にFlashのローディングのパーセンテージが進まなくてイライラしたり、動画の読み込みが遅くてイライラする事があるんですがそんなリッチコンテンツなんかないのにサイトが重かったりすると「何でこんな普通のサイトなのにこんなに遅いねん!」って余計イライラしませんか?
僕はけっこうイライラしますw
これには色々原因があるんですが主に
・読み込んでる画像が重い
・サーバーに負荷がかかって処理に時間がかかっている
という2つが主な原因である場合が多いです。
要は重い画像やトラフィック増によるサーバーレスポンス低下がだいたい遅くなってる犯人だという事です。
(もちろん異論は認めますw)

そこでその原因を外に持っていけばアクセスが増えたりしてもブログやサイトが安全に運用できるよね!っていうのが今回の趣旨です。
前置きが長くなりましたが本編はここから。

画像を外注化(別サーバーに置いておく)するメリット
・画像のデータをブログの本体のサーバーに置かないのでサーバー容量を圧迫しない
・画像データが別サーバーから読み込まれるので本体のサーバーのサーバーレスポンス低下を招きにくい
・その結果「サーバーが落ちにくい」「アクセスが多くなっても安定してサイトやブログが表示される」
・SEOの面でも効果的(サイトの表示スピードの件で)
・移転する時もらくちん(ここがけっこう重要)

上記のようなメリットが考えられるので画像は外部のサーバーに置いておくのがいいと思います。
そこで考えるのが「どこに置くか」
今回は大御所のFlickrとPicasaにします。
これには理由があってFlickrやPicasaのような大手サービスは「サーバーが安定していてまず落ちる事がない」というのが1番大きな理由です。
せっかく画像を外注化してもそこがだめでは話になりませんからねw
ただ、外に置くのにその影響で管理する手間や作業工数が増えるとかえって負担になるのでそこをできるだけ減らして楽にかつ簡単に運用するためにWPのプラグインを使用します。
今回紹介するプラグインはこの2つ
WordPress Media Flickr
Picasa Express x2

では実際に僕が使用している方法を紹介します。

WordPress Media Flickr
こちらは主に息子達の写真を貼り付ける時に使っています。Flickrの有料アカウントを持っているので容量を気にせず撮った写真をガンガン放り込んでブログ用のやつだけ公開設定にしてsetにまとめています。
アップロードしたらFlickrが勝手にリサイズしてくれるのでサイズとかも気にせずどかどか入れれるのがいい感じです。
インストールはWordPress Media Flickrから手動でもいいですし「Wordpress Media Flickr」で検索して自動インストールでもどっちでもいいと思います。
好きなほうでやってくださいw

実際の埋め込み手順
プラグインをインストールしたら下の画面のようなアイコンが出ます。
Flickrに画像を放り込んで準備ができたらアイコンをクリックします。
Media Flickrアイコンをクリック
Media Flickrアイコンをクリック

するとlightboxでギャラリーが出てくるので埋め込みたい画像をクリック
lightboxでギャラリーがでてくるよ
lightboxでギャラリーがでてくるよ

あとはサイズを選んで挿入ってするだけ
サイズを選んで挿入
サイズを選んで挿入

僕の場合は500pxで埋め込んでます。
続けて他の写真を挿入ってするとどんどん画像を埋め込んでいきます。
でここが少しポイントなのですが少しでも作業効率をよくすることが大切だと思うんです。
だってそれが手間になってめんどくさいからブログしないってなったら本末転倒ですからね。
で、ブログを書く時に僕は実際こういう手順をしています。

1.写真をFlickrやPiucasaにアップロード
2.大枠の記事を書く
3.画像を一気に埋め込む(このとき場所はどこでもいいです。一番上でも一番下でも好きなところにドカンと挿入します)
4.テキストエディタに埋め込んだ画像タグをカット&ペースト
5.テキストエディタで不要なタグを一括削除したりAltやtittle、リンク先URLの調整
6.調整済みのタグを記事内の適切な箇所にコピペする

という感じです。実際には息子達の写真は妻に撮影してもらってるので妻が撮影した画像をFlickrにアップしてもらっている間にこっちは記事の下書きをしているんですけどね。ブログを複数人で運用する場合の作業分担もできるので作業の効率もいいと思っています。
で、その埋め込んだ画像なんですがプラグインで埋め込むと不要なタグがどうしてもでてきます。
気にしなければいいところではありますが僕はすごく気になるのでテキストエディタでさくっと一括削除してやります。
これがブラウザで入力でする時に比べて作業スピードが格段に違いますのでかなり作業効率がいいです。
こだわりたい方はぜひ試してみてください。

余談ですが旅行先などでの移動中にはポメラでブログの記事を下書きしたりする事もあります。
画像と記事を別のタスクにするとどんな場所でもブログを書く準備ができて快適になってきますよ。

Picasa Express x2
こちらもインストールはPicasa Express x2から手動でもいいですし「Picasa Express x2」で検索して自動インストールでもお好きなほうでどうぞ。
Picasaは有料アカウントではなくて無料アカウントなんですが、こちらは画面のキャプチャとかの画像用で(息子達の写真以外ですね)使うので1024 MBも容量あればまず足りなくなる事はないでしょう。
これまではWP入れてるサーバーにアップしてましたが上記のような事を色々考えて外に出す事にしました。
ちなみにこの記事の画像はPicasaに入れてます。
運用手順は以下のとおり

インストールするとPicasaのアイコンが出てくるのでこれをクリック
Picasaのアイコンをクリック
Picasaのアイコンをクリック

Picasaの方で公開用のギャラリーを用意しておき、画像はそこに入れておきます。
ギャラリーを選択
ギャラリーを選択

画像を選んでInsertをクリック
画像を選んでInsertをクリック

あとはFlickrの時同様に画像をどんどん挿入してテキストエディタで編集すればOK。
こんな感じで用途別に画像を保管するエリアを分けて運用する感じにしています。
これでアクセスが増えてもサーバーに負担が増えにくくなったので快適にブログを運用できますね。
まあこのブログがそんなにアクセス増えることもないんですけどw

勢いで書いてたらえらい長文になってしまいました。
最後まで読んでいただいてありがとうございます。

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WPの入力支援プラグイン「AddQuicktag」

ちょっと便利なWPのプラグインを見つけたので紹介します。
今回紹介するプラグインはWPのエントリ画面で入力支援をしてくれる機能を追加できる「AddQuicktag」っていうプラグイン。
使い方によってはかなり便利です。
まずはインストール。
今回はFTPとか使うのめんどくさかったのでプラグインディレクトリからの追加。
まずはプラグインの新規追加から「AddQuicktag」で検索
検索

するとこんな感じで結果に表示されるのでインストールを実行。
これ

はいこれでインストールは完了。
おれはFTPでインストールしたいんだよ!っていうこだわりがある人はこっちから手動ダウンロードしてください。
AddQuicktag

インストールが完了したので設定を開始。
プラグインの中からAddQuicktagを確認して設定をクリック
設定しよう

するとこんな画面が出るのでラベル名とかタグとかを設定します。(自分でCSS当てた要素とかを入れます。)
タグを登録すると

するとエントリ画面上部にさっき追加した要素がボタン化されて置いてあります。
これをクリックするとさっき登録したタグが自動で挿入されるっていう仕組み。
ボタン一発でドン!

以前紹介したMTの入力支援プラグインCustomEditorButtonのWP版みたいな感じですね。
これならHTMLとか詳しくないお客さんにもこっちで指定した構造の記事を書いてもらいやすくなって仕事にも使えるっていうけっこういい感じの代物です。
気に入った方は自己責任で入れてみてね!

ページトップに戻る

でろぐ記事本文ユニット

投稿年月日
  • Total
    Share

WordPressのプラグインでシンタックスハイライト

いきなりですが、シンタックスハイライトをでろぐでも実装しようと思いました。
というのもあまりコードとか公開しないしシンタックスハイライトとか使う機会ないしめんどくさいしいいかなと放置してきたんですが、自分用のメモ記事とかでコードを書くときにシンタックスハイライトがないほうが逆にめんどくさいという事を気付いたのでちょっと実装してみました。

で、早速実装するにあたって色々調べてみたんですが
・手動で対応
・プラグインで対応
の2パターンでできそうな感じ。ここは迷わずプラグインで対応す売る事に。
なぜかというと手動がめんどくさいから。プラグインのほうが手っ取り早いw
で、いいプラグインないかなって探してたんですけど色々ありすぎて訳わかんなくなってきたのでとりあえずSyntax Highlighter and Code Prettifier Plugin for WordPressていう長い名前のプラグインを入れてみました。
ちなみに最近はWPのプラグインはFTPでアップロードせずに「プラグイン→新規追加」から検索していれるようにしてます。
手動アップロードは手間がめんどくさいのでw
(さっきからめんどくさいばっかりですな)

で、インストールも難なく終わりましたが使い方がよく分かんなかったので教えてGoogle先生。
調べた結果こんな感じの記述でいいようです。


				

これでコードってわかるようになりました。
コピペもしやすくなって自分用に最適化されてきていい感じですw
brush:[html]のhtmlの部分は各コードの種類に合わせて以下から選択してあげましょう。

Bash/shell			[bash][shell]
C#					[c-sharp][csharp]
C++			[cpp][c]
CSS			[css]
Delphi			[delphi][pas][pascal]
Diff			[diff][patch]
Groovy			[groovy]
JavaScript			[js][jscript][javascript]
Java			[java]
Perl			[perl][pl]
PHP			[php]
Plain Text			[plain][text]
Python			[py][python]
Ruby			[rails][ror][ruby]
Scala			[scala]
SQL			[sql]
Visual Basic		[vb][vbnet]
XML			[xml][xhtml][xslt][html][xhtml]

あと、オプションも付けられるので状況にあわせて付けましょう。

ツールバーの表示・非表示	[toolbar: false][toolbar: true]
指定行の強調表示		[highlight: [1, 3]]
行番号の表示・非表示		[gutter: false][gutter: true]
行番号の初期値変更		[first-line: 10]
クリックで詳細表示		[collapse: true]
URLリンク有効・無効		[auto-links: false][auto-links: true]

これでよりブログをコードのメモ帳代わりに使えるぞ!

ページトップに戻る