wordpress5.0の投稿画面が酷かった件。

WPのプラグインは時々テキトーに更新すると動かなかったり
WP自身がハングすることもあるので結構慎重に更新していたんですが
本日?なのかな・・あたったWPの更新したら・・・

投稿画面がとんでもなく酷い状態に‥(;^ω^)

プラグインは使えないわ、書き込む欄がいくつも出るわで
どーなってんじゃこりゃ?!ってなって試行フリーズしたw

で、どうにか以前の投稿画面にならないかなぁと検索したら
旧バージョンが使えるプラグインがあるようなので入れてみました。

・・・まぁ、よく見ると更新直後の画面に旧バージョンのエディタを使用したい
方はこちら!なリンクが張ってあるので、見ていればなんてことはないんですけど・・

「ながら」で作業してたら見逃してた・・・orz

Classic Editor
プラグインは公式が公開しているものなので安心です。
旧バージョンで使いたい場合はこちらをインストールすると以前のままで使うことが出来ます。

【WP】TablePressのメモ【プラグイン】

WordPressの追加プラグインで便利な表を
記事内に挿入できるプラグインのメモです。

【WP】WP SyntaxHighlighterを導入【プラグイン】

以前からソースコードを投稿する時にそのままコピペしても空白部分などがおかしくなったり
表示されなかったりとその部分を変換してくれるようなサイトを使って色々やっていた訳ですが

ぶっちゃけ面倒くさいw

なので、どうにかしてくれるようなプラグイン無いかしら?と思いたち探していたら発見しました。

WP SyntaxHighlighter
ソースコードを投稿欄にペーストしてそのソースコードを囲ってボタンでポン!って感じの
本当にお手軽なプラグインです!

ちなみに検索をかけてすぐに出てくる有名なプラグインは
SyntaxHighlighter Evolved
こちらのプラグインなのですが、自分の環境下では動きませんでした。
多分解決する方法は探せば見つかるとは思いますが、すぐに使いたかったのであえて
WP SyntaxHighlighterを選択しています。
SyntaxHighlighter Evolvedこっちも使い方が判明したらメモしていこうかと思います。

話は戻りますが・・w
WP SyntaxHighlighterのプラグインで表示させたソースコードがこれ。

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
} 

見やすい上に、綺麗に色分けされてます。
対応しているコードは
AppleScript, ActionScript3, Bash, ColdFusion, C, C++, C#, CSS, Delphi, Diff, Erlang, Groovy, HTML, Java, Java FX, JavaScript, Pascal, Patch, Perl, PHP, Plain text, PowerShell, Python, Ruby, Ruby on Rails, Sass, SCSS, Shell, SQL, VB, VB NET, XHTML, XML and XSLT
です。 結構多いw

導入は簡単だと思うので設定の方をちょtこっと説明。
●使用するライブラリ
この項目を2.xに変更することと、ツールバーという項目にcheckを入れることで
ソース表示部分にマウスオーバーでツールチップ(ソースコード表示・クリップボードにコピー等)
が右上に表示されるようになる。
*ちなみに3.xだと画面上には?のツールボックス(クレジット表示)しか表示されず、ソースコード上で
ダブルクリックすることで範囲指定が出来る。

●テーマ
ソースコード表示の背景とコードのカラーリング(テーマによって固定)を変更することが出来る

●ショートコード
ソースコード内で使えるコマンド。詳しくこちらに説明が書いてあります。
基本はサイトの説明どおりなんですけど、このプラグインだと記述方法が異なるので
使えそうなコードを少し書いておきます。

基本はエディターでSH Preボタンで囲むとソースの中身はこんな記述になります。

<pre class="brush: html; gutter: true">ソースコード</pre>

この場合
brush — 使用する言語・・・のことだと思う。(自信ないけどw)
gutter(false/true) — コードボックスの左に表示される番号
複数のショートコードを使用する場合は;(セミコロン)で区切る。

以下使えそうなコードをピックアップ。

highlight: (表示したい行の番号);
特定の行をハイライト表示させる事ができる。

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
} 

複数の行をハイライトさせたい場合は
highlight: [1,3,5]
このように “,”(カンマ)で区切る。

1行目・3行目・5行目のラインをhighlightすることが出来ました。

public class HelloWorld {
  public static void main (String[] args) {
    System.out.println("Hello World !!");
  }
} 

と、こんな感じで使えます。
ショートコードは他にも色々あると思うので検索して調べてみると良いかも。

Blogに書き込み出来ない不具合を修正しました

知り合いの方から「Blogに書き込みデキマセンよ~」とのご指摘を受けて
書き込みできるように修正しました。(Eさん有難う御座いました!)

CAPTCHAのPluginを更新した際に書き込み出来なくなっていた模様。。
確か以前にもあったような・・・・(;´Д`)

あのPluginを更新した時は気をつけることにします><

・・・最近Spam全然来ない!と思ってましたが、書き込み出来なきゃ来る訳アリマセンね!!!

(´・ω・`)

スマホ対応

サイトのデザインを変更したついで?で、Blogをスマホ対応にして見ました。
とりあえず手持ちのipod touch(iOS5)からは見えてますしコメントの投稿も出来るようです。
Android端末は持っていないので、ちゃんと見えるか定かでは有りませんが^^;

因みに使用したのはWordpressのプラグインで
WPtouch
http://wordpress.org/extend/plugins/wptouch/
という物です。日本語にも対応しているので使いやすいかも?

使用中のWordPressプラグイン

今使っているプラグインのリストです。

Akismet
defaultで付属しているアンチスパムのプラグインです。
使用するにはAkismet APIKeyが必要になります、これは無料で取得することが出来ます。

Collapsing Links
サイドバーなどに表示されるLinkが折りたたみ式に変更されます。Javascript使用です。
シリーズ物で、CategorieやArchive・Pageなどの表示を折りたためる物も出ているようです。

Comment Form Quicktags
Blogのコメントフォームに追加できるtagを挿入出来るプラグイン。
追加できるタグはオプションで追加・削除出来ます。

Contact Form 7
メールフォームを追加できるプラグイン。同じ方が製作されているReally Simple CAPTCHAと組み合わせる事で
登校時に画像認証を付けることが出来る。

Really Simple CAPTCHA
画像認証のプラグイン。Contact Form 7と組み合わせて使用中。

Search Excerpt
検索語句の前後を抜粋表示してくれるAddon。

Search Word Highlight for Mutibyte
サーチエンジンからこのプラグインを導入しているWPサイトに飛んできた際、検索文字をハイライト表示してくれる。

SI CAPTCHA Anti-Spam
コメントフォームに画像認証を付けることが出来る。

Updated Today Banner
設定した時間内に更新された場合にBlogの左端又は右端に更新されたよバナーを表示することが出来る。

どれも結構使えて便利です!

[カスタマイズ] Lightbox[プラグイン]

今更追記:2011/2/3
今更間漂いますが、現在LightBoxはWPのプラグインとしてDL出来るようです。WP管理画面から
プラグイン→新規追加 より検索すれば、該当のプラグインが見つかるかと思います。

MTや当ブログ等で使用出来る画像を専用のウインドウで表示させることが出来る
Lightbox jsの設置や使用方法のメモ。

設置方法
小粋空間のこちらのアーカイブwを参照。
http://www.koikikukan.com/archives/cat_91.php

使用方法*赤文字は任意に変更*

<a href="http://domain/path/to/images/hogehoge.jpgrel="lightbox"><img src="http://domainpath/to/images/hogehoge_thumb.jpg" WIDTH="400" HEIGHT="325" /></a>

表示させる画像をグループ化させる場合

<a href="http://domain/path/to/images/hogehoge1.jpgrel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge1_thumb.jpg" WIDTH="400" HEIGHT="325" /></a>
<a href="http://domain/path/to/images/hogehoge2.jpgrel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge2_thumb.jpg" WIDTH="400" HEIGHT="325" /></a>
<a href="http://domain/path/to/images/hogehoge3.jpgrel="lightbox[example]"><img src="http://domainpath/to/images/hogehoge3_thumb.jpg" WIDTH="400" HEIGHT="325" /></a>

WordPress Plugin

ちょっと立て込んでいて中々掛けませんでしたがWordpress:Pluginのお話です。

基本的な話ですが、プラグイン自体にjavascriptをしている物が多いのでご注意を。

今回はWP2.7.1を新規にインストールして見ました。
詳しいインストール方法は
過去記事:wordpress2.5.1のインストール方法(coreserver編)

此方を参考にしてみて下さい。

デフォルトのテンプレートでも十分使えますが、私はMT時代からのお気に入り
「小粋空間」様のテンプレートを使用させて頂いています。
デザインが好きなんですよね~><

そして当サイトで使用しているpluginです。個人的なメモっぽい感じですw

Akismet
デフォルトで装備されているスパム対策用のPlugin。
WPに標準装備されているものの、APIキーが必要なのでほんの少しだけ手間が掛かりますが
登録するだけでスパムをブロックしてくれるのでやっておくのが良いと思います。
APIキーの取得方法はこちらをご参考下さい

Akismet APIキーの取得方法

キーの取得方法
WP管理画面→Akismetを有効にする→プラグインタブのAkismet→
説明文にWordPress.comへのリンクがあるのでサイトへ移動
サイトに

How do I get one?
When you sign up for a WordPress.com account we will email you an API key.
どうやって取得するの?
あなたがWordPress.comにアカウントを登録する事によって、APIキーをメールでお知らせします。

なので、サインアップサイトに飛び、登録を開始します。
Usename:Wordpress.comサイトで表示される名前
Password:ログイン時に必要になります
Confirm:上記で入力したPasswordを確認の為入れます
Email Address:APIキーが送られてくるのでメールアドレスを入力します
Legal flotsam:本サービスの条件に同意するかどうかの選択です。チェックをつけます。
Gimme a blog! (Like username.wordpress.com):Blogを公開するスペースを下さい!(usename wordpress.com見たいな感じの)
Just a username, please.:(ユーザーネームだけで良いです)
ブログを公開するスペースを借りたい場合は上を、既にスペースがあれば下を選択
nextを押します。

Check Your Email to Complete Registrationというページが表示され先ほど入力したメールアドレスが
画面に表示されているのでメールを確認してください。
Activate ●●ユーザーネーム)というメールが送られてきているので中を確認
Webアドレスが添付されていますので開くと
Your account is now active!というメッセージと登録したユーザーネーム/パスワードが表示されますのでメモ。

続いてこちらのWordPress.comにログインします。
先ほど控えた名前とパスワードを入れます。

ログインしたら左のメニューのProfileを選択。
一番上に
Your WordPress.com API key is: xxxxxxx(英数字) Don’t share your API key, it’s like a password.
xxxxxxの部分が取得したAPIキーになります。

自分がインストールしたWP管理画面に戻りメニューのPlugin→Akismetを選択。
先ほどのサイトで表示された英数字を入力(コピペ)し、設定の更新を押せば使用可能になります。