BLOGリニューアル（その１）　「Edit」のリンクをつける

MT→WP化の際には、デザインはMT時代と同じ感じになるように
ザっと作ってしまいましたが、横幅900px程度の3カラムだとエントリ部分が
ちょっとキツキツに感じてきたので、テーマカスタマイズの勉強がてら
リニューアルしてみる事にしました。

当初は、Twenty Tenを元にしていじってみたのですが、
途中まで作ってみたら何か2カラムに変わっただけで
以前とあまり代わり映えしない気がしたので、「AllTuts」という
テーマを元に子テーマを使ってカスタマイズする事にしました。

以下、備忘録その１。
 

 

---

 
「Edit」のリンクをつける。
 
最初は気付かなかったのですが、以前のデザインではエントリ部分に「Edit」リンクが
あったのがAllTutsには無いようなので、Comment件数を表示する場所あたりに、
ログイン時のみ表示するように改造してみました。
 
 
【下ごしらえ】
Commentに吹出しのアイコンがあるので、並べた時に見栄えが良いよいにEdit用の
アイコン画像を作っておきます。（今回はComment用のアイコン [ico_comments.png] と
同じサイズ [31×29] で [ico_edit.png] という名前で作成し、親テーマのイメージ
ディレクトリ [wp-content/themes/alltuts/images] に置きました。
 
 
【作り方】
記事一覧ページはindex.phpの47行目あたり、記事詳細ページはsingle.phpの
18行目あたりにCommentを表示するコードがあるので、その前の行に
それぞれ以下のコードを追加。

<?php if ( is_user_logged_in() ) {echo "<img src=\"" . get_bloginfo('template_directory') . "/images/ico_edit.png\" alt=\"Edit\"/>"; };?> <?php edit_post_link('Edit', '', ''); ?>&nbsp;&nbsp;

以前使ってた別のテーマからEditリンク部分のコードをコピってくれば良いだろう
なんて気軽に考えていたのだが、見栄えよくアイコン画像なぞ貼ってしまったので、
is_user_logged_in関数でログイン判定してみました。Edit用アイコンのURLを
組み立てる時にbloginfoでなく、PHPで扱えるget_bloginfo使わなきゃいけない
ってのも最初解らなかった…。
 
そんな訳で、見栄え的にはこんな感じになりました。
因みにAuthor表示部分は、自分しか投稿しないので非表示にしてあります。
 

 
そうそう、AllTutsの場合、ダッシュボード→AllTuts OptionsでGeneral Settings内の
Cufon Font Replacementを「No」にしておかないと、日本語のエントリタイトルが
酷いことになっちゃいます。

あと、ソースコードが見やすくなるように
SyntaxHighlighter Evolved というPluginも導入してみました。
 

【参考サイト】
》AllTuts – Setting up
》WordPressテーマ「All Tuts」の見出しテキストの日本語エラー
》ソースコードをキレイに表示するWordPressプラグイン「SyntaxHighlighter Evolved」
》WordPressでソースコードを装飾するプラグイン

 
 
【追記】
SyntaxHighlighter Evolved、V2xにして長い行を折り返す(v2.xのみ、横スクロールバーを無効にする)に
チェックを入れてみたのですが、モノによっては折り返されずに枠からはみ出してしまいます。
ググってみたところcssで何とかなりそうな感じだったのですが、!important指定しても一向に効かず。
ソースみてみたら、shCore.css内の記述が既に!important指定されていたようだったので、
やむを得ず直接編集しました。

修正ファイル：wp-content/plugins/syntaxhighlighter/syntaxhighlighter2/styles/shCore.css

以下のコードをコメントアウト。

.syntaxhighlighter code 
{
	display: inline !important;
}

以下のコードを追加。

.syntaxhighlighter code,  x:-moz-any-link
{
	display: block !important;
	word-wrap: break-word !important;
	float:left !important;
}

.syntaxhighlighter .line
{
	clear:both;
}

 

【参考サイト】
》SyntaxHighlighterを使っていて、行の折り返しを有効にしている場合、 思うような場所で改行してくれずに、ボックスからコードがはみ出してしまうことがあります。