blogリニューアルとWordPressのメモ的な何か-その2

wapuu

前回のインストール編に続き、今回はテンプレートと追加したプラグインのメモ。

公式:WordPress › 日本語
公式:CORESERVER.JP


目次▼open

WordPressのテンプレート作成

ついに重要なテンプレート作成。fc2のテンプレートは一度作ったことがあったので問題ないだろうと思ってたけど、全然違った。
でも記事ループなどの基本的な概念は同じかな? とりあえず作り方が分からなかったのでいろいろ参考にしながら作成。。。

参考:WordPress オリジナルテーマの作り方 3.0+ | Webクリエイターボックス

style.cssは管理画面で書き換えできるようにパーミッション変えとくと楽かも。

テンプレート変更・追加ヶ所

全部じゃないけど、よく使いそうな部分をピックアップ

時間表示

まずは時間表示。time要素などに指定するために追加。

<p><time datetime="<?php the_time('c') ?>">投稿日時:<?php the_time('Y年m月d日') ?></time></p>

他に書き方あるのか謎だけど、表示されたのでおk。とおもったけどタイムゾーンがおかしい。

これはテンプレートのfunction.php

date_default_timezone_set('Asia/Tokyo');

を指定して解決。

morelinkの出力タグ変更

classとか指定したかったのでフォーラムに書いてあったのをほぼそのまま使って修正。

参考:WordPress › フォーラム » the_contentで出力されるソースの変更

function my_content_more_link($output, $more_link_text){
  return '<p class="morelink"><a href="' . get_permalink()
    . '" title="' . $get_the_title_safe . '">'
    . $more_link_text . '</a></p>';
}
add_filter('the_content_more_link', 'my_content_more_link', 10, 2);

こんな感じでfunction.phpに指定。index.phpなどのthe_content()周辺はとくにいじらなくても大丈夫だった。

これでURLに#more-がつかなくなったので、前に設定してたmoreタグの位置まで飛ばないようにする関数がいらなくなった。

また、タイトルに改行等のタグが入る場合はreturnの前にget_the_title()を持ってきて、strip_tags()で不要なタグを削除させるといい。
もしくはhtmlspecialchars(get_the_title(),ENT_QUOTES,"UTF-8")みたいにして、削除しないでエスケープ。

moreタグの前後を分割

間に何か入れたい場合もあるので、これもフォーラムを参考に分割。

参考:WordPress › フォーラム » single.phpでmoreの前後を別々に表示したい

コメントとトラックバック分割

WordPressは、トラックバックとコメントが一緒らしいので分割。
これもほぼそのまま使用。

参考:WordPressのコメントとトラックバックを分けてカスタマイズ *Ateitexe

ぱんくずリスト

ぱんくずリスト。
長いけど下記を参考にした。ついでに勉強にもなる!

参考:パンくずリストを作ってみるとWordPress でのサイト構築のコツがつかめるかもしれない(コード 付き)

使わなそうな添付ファイルのページ(attachment)ではパンくずがちょっとおかしいのでちょっとカスタマイズ。
ソースのコメントに書いてある「//ブログの個別記事ページ」の部分を

} elseif(is_single()&&!is_attachment()){

のようにして(必要なら他の部分も)、添付ファイルページ部分を下記コードに書き換える。

//添付ファイルが投稿されてる記事のカテゴリ名を取得
$cat_name = "";
$cat_name = get_the_category($post->post_parent);
if(isset($cat_name) || ($cat_name && !strlen($cat_name)==0)){
if(isset($cat_name[0])){
$cat_name = $cat_name[0];
}else{$cat_name = "";}
}
//出力
if ( !isset($cat_name) || (!$cat_name && strlen($cat_name)==0) ){
$str.='<li>';//値が空の場合
}else{
$cat_name = get_category_parents($cat_name->term_id,TRUE,'</li><li>&gt;</li><li>');
$str.='<li>'. $cat_name .'';
}
 
//添付ファイルが投稿されてる記事のタイトルを取得
$parent = get_post($post->post_parent);
//出力
$get_the_title_safe = strip_tags(get_the_title($parent));
$str.='<a href="'. get_permalink($parent) .'">'. $get_the_title_safe .'</a></li>'; //タイトルとリンク先をテキストで出力
$str.='<li>&gt;</li>';
 
$str.= '<li class="end">'. $post -> post_title .'</li>';

プログラム分からないから冗長かもしれない。

get_category_parents()なんて便利なものがあるなんて知らなくて結構悩んだ。

同階層の複数カテゴリーがある場合は、多分カテゴリーIDの若い順か名前順かで表示されるので、複数カテゴリーを表示する場合はget_category_parents()foreachでループしてあげる。
HTML出力の事を考えると、他の方法でもっと細かく出力したほうがよさそう。
縦型のパンくずで、区切り文字とaタグだけなら問題ないだろうけど。

という感じでこうしたら出来そうな事を書いたけど難しい…
あと上記のコードだと固定ページの場合もその画像の親しか表示されない。階層化はどうするのか分からない…
何方か複数カテゴリ対応と固定ページの階層化作ってください><

ちなみにカテゴリーの登録の仕方は下記記事のような感じで、最下層のカテゴリーのみにチェックしなければパンくずがおかしくなるみたい。

参考:WordPressでプラグインを使わずにパンくずリストを表示する – 残像ブログ

デフォルトウィジェット変更

デフォルトウィジェットのカレンダーとアーカイブ合体。
カレンダーとプルダウンアーカイブを同じところに表示したかったので、いろいろ参考にしつつwp-includes/default-widgets.phpにあるカレンダーとアーカイブを合体・・!
そしてテンプレートのfunction.phpにウィジェット表示に必要なコード書いて保存。プログラムとか意味不明だけどなんとか表示できたのでおk。

参考:WordPress 3でウィジェットを作るカスタマイズ: 小粋空間

RSSを取得して表示

よくブログで見かけるヘッドライン的な。自分でも使うからいれときたい!

参考:WordPress 3.0 以降で RSS を一覧にする方法

上記を参考にほぼそのまま使用。けど導入したら表示が遅くなった。
よくソースをみてみるとキャッシュがoffになってるようだ。これだと開くたびにRSS取得しにいくんじゃ・・?というわけでキャッシュさせるように設定。

SimplePieの使い方がよくわからなかったので調べた結果、下記のように指定すればキャッシュしてくれることが分かった。

//$feed->enable_cache(false);
$feed->set_cache_location("wp-content/cache/simplepie/");    //保存するディレクトリ
$feed->set_cache_duration(3600); //キャッシュ間隔(秒)

デフォルトのは一応コメントアウトしておいた。キャッシュの位置はどこでもいいとおもうけど、今回は自分のテンプレートフォルダに設定。パーミッションの設定もわすれずに。

これで満足!だけどnewマークがほしかったので追加~試行錯誤した結果↓

$date_prev = date('c', time() - (1 * 12 * 60 * 60) );   //現在の時刻から-12時間
echo '<ul>';
foreach($items as $item) {
        $list = Array(
            'date' => $item->get_date('Y年m月d日-H時i分'),
            'title' => $item->get_title(),
            'link' => $item->get_link(),
            'date_iso' => $item->get_date('c'),
        );
    $new = "";
    unset( $new );
    if ($list['date_iso'] > $date_prev){ //feedの時間が設定した時間以内ならnewを表示
        $new = "new!";
    }
        echo sprintf(
            '<li><span class="date">%s</span>:<a href="%s">%s</a><span style="color: red;">%s</span></li>',
            $list['date'], $list['link'], $list['title'], $new
        );
}
echo '</ul>';

こんな感じになった。とりあえず動作したのでおk。

ちなみに上の設定だと過去12時間以内だけど、他には

$date_prev = date('c', time() - (1 * 24 * 60 * 60) );   //現在の時刻から-24時間
 
$date_prev = date('c', time() - (7 * 24 * 60 * 60) );   //現在の時刻から-7日間

ただ掛けてるだけみたいなので適当に短く書いても大丈夫だとおもう。

Newマークもつけたら、適当な長さ以上のタイトルを調整して「…」と三点リーダーをつけてみたいので、unset( $new );の上らへんに

$list['title'] = mb_strimwidth($list['title'], 0, 49, "…", "UTF-8");

を追加。
多分これで三点リーダーを含めて最大半角50文字に調整してくれるかな?

サイト名を取得するのはこんな感じで取得。↓

'site_title' => $item->get_feed()->get_title(),

あとはsprintfを調整するか直接出力してあげる。

管理画面にアイキャッチ表示

あってもなくても変わらないけど、一応。

参考:WordPressのアイキャッチ画像 | Webクリエイターネット

とりあえずこんな感じかな?

追加プラグイン

簡単なコメントとメモ。使ってないプラグインもあるけど、使いそうなプラグインは一応インストールしておいた。
デフォルトプラグインはなんとなく消したくないので、「Hello Dolly」は無効化中。プラグイン弄って自分の好きな歌詞にしてる人もいるらしい。

プラグインへのリンクや設定方法は載せてないので、詳しくはWordPressのプラグイン検索やgoogle先生で・・・

有効化したもの

WP Multibyte Patch

デフォルトプラグイン。とりあえず有効化。

Akismet

デフォルトプラグインだけど優秀らしい。APIキー登録が面倒だけど、WordPressのコメント機能を使うなら必須かも。

WPのコメント機能使わないで、disqusというサービスも試してみたいけどね、konamistyleでも使われてたし!
でも多分Jetpackのコメントのほうが優秀かもしれない。

追記:「spam-byebye」があればきっと十分そうなので、現在停止中。

spam-byebye

フィルターによってコメントスパムを弾くプラグイン。
「SI CAPTCHA Anti-Spam」などのキャプチャよりはこっちのほうが良さそう。

AddQuicktag

投稿画面のビジュアル・HTMLエディタに好きなタグを挿入できるボタンを追加。必須だと思うプラグイン。

WP-PageNavi

次か前のページしかないデフォルトのナビゲーションを拡張。今何ページ目にいるのか分かりやすくなる。
テンプレートの修正必要。

追記:「Prime Strategy Page Navi」こちらのほうが良さそうだったのと、若干軽い?気がしたので変更しました。
設定項目はありませんが、テンプレートタグでパラメータを指定できます。

Simple Image Sizes

挿入する画像のサイズを増やせるプラグイン。

似たようなので「Additional image sizes」があったけど使えなかった。

Ozh’ Better Feed

基本的に全文表示されるRSSフィードを、moreタグまでにする。
個人的にはRSSにコンテンツを全部載せる必要が無いので使いました。
RainmeterやSamurizeでRSS読み込んでデスクトップに表示してる人は、コンテンツの最初だけあれば十分なはず・・・多分。

WP-lightpop

画像や動画サイト、ファイル等をlightbox 風に表示するプラグイン。
公式には登録されてないのでこちらから。
WordPress Plugins/JSeries » WP-lightpop (画像、動画ハイライト表示)

litobox系はいろいろあるけれど、WP-lithtpopはシンプルで機能が豊富なので好きです。
ただ最近というかここ数年更新されてないので今後が不安…

jQueryを独自で導入してる場合は、header.phpfunction.phpにてWordPress側のjQueryをテンプレートでのみ読み込まないようにするか、WordPress側のjQueryのみを使うようにしないと、2つのjQueryが読み込まれる事になるので注意。

WP SyntaxHighlighter

ソースコードを見やすく表示するプラグイン。
これもプラグインじゃない物もあるけれど、こちらは必要ないページでは不要なScriptを読み込まなかったり、Syntax Highlighterのバージョンを2.1系や3.0系どちらか選べたり、日本語だったり、CSS指定できたり…等細かい設定が可能。
不満な部分があると言えば、コードブロックのタイトルが個別に設定できない事だろうか。HTMLエディタで弄れば問題ないけど、ビジュアルエディタと行ったり来たりすると、設定したタイトルに戻ってしまう。

なのでプラグイン設定のCSSを追加する場所から、before擬似要素を追加して対応。

.syntaxhighlighter.html caption:before { 
content: "HTML-";}
.syntaxhighlighter.css caption:before { 
content: "CSS-";}
.syntaxhighlighter.php caption:before { 
content: "PHP-";}
.syntaxhighlighter.javascript caption:before {  
content: "JavaScript-";}

あんまり使いたくなかったけど、とりあえず簡単に対応。

あとはlightpop同様、jQueryの干渉に注意。

ちなみに「Crayon Syntax Highlighter」も良さそうだったけど、ホバーしたときメニューが出ない、もしくはメニュー固定して表示できるなら乗り換えてもいいかな…
高機能だしやりたかった事ができたので、早速乗り換えました。
そしてまた戻しました。キャッシュすれば気にならない感じかもしれませんが、高機能なだけにちょっと重いです。

WordPress Popular Posts

人気記事のランキングを表示するプラグイン。
日・時間ごとのページビュー数や、コメント数等でソート可能。サムネイルのサイズやHTMLも多少カスタマイズできる。

タイトルの後にPVやコメント数も表示させる事が可能。
PV数はデフォルトだと%s viewsとなっているので、変更したい場合はwordpress-popular-posts.php$views_text変数部分を弄ってあげればおk。コメントも多分$comments_text%s commentsを変えてあげればいけそうだ。

AmazonJS

Amazonの商品を検索・紹介するプラグイン。※Amazon Product Advertising APIのアカウントが必要
tmpフォルダを作って指定したりと多少WordPress外での設定が必要だけど、これが一番綺麗に表示できるかなー多分。

参考:AmazonJS (WordPress Plugin) | kwLog

Category Order

カテゴリーの順番を変えるプラグイン。
カスタムメニュー作って順番を入れ替える方法もあるけど、それだと投稿数が表示されない。

「My Category Order」というのもあったけれど、こっちのほうが管理画面の見た目がシンプル。

Custom Upload Dir

アップロードフォルダをカスタムするプラグイン。
投稿別に分けたかったので使ってみました。

現在WPデフォルト設定の「年月ベースのフォルダに整理」を使ってる場合でもちゃんと反映されます。ただ、WPデフォルトでの設定はURLを削っていった時の挙動がおかしかった気がしたので、こちらに乗り換えるのであればWPデフォルトの設定はオフにするのがいい。

Google XML Sitemaps

プラグイン名そのままの機能。sitemap.xmlを生成でき、通知の設定も可能。

Jetpack by WordPress.com

とりあえず沢山の機能があるプラグイン。それぞれ必要に応じて有効化無効化が可能。
こんなにいらないよ…と思って入れない予定だったけど、コメントや短縮URL・関連記事の機能に惹かれて導入。

DB Cache Reloaded Fix

キャッシュ系プラグイン。
CORESERVERではそう簡単に動いてくれないので、パーミッション周りの設定が必要。

WP File Cache

こちらもキャッシュ系プラグイン。
これもCORESERVERで上手くいかない場合があるので調整。

設定の「Do not use cache in the Admin Panel」はチェック推奨。

あとwp-contentを移動してる、またはフォルダ名変えてるせいか上手く導入できなかったので、file-cache.phpoptions-file-cache.php/wp-content/~~~の部分を環境に合わせて設定。
プラグインのバージョンアップ時は注意しないと…

001 Prime Strategy Translate Accelerator

翻訳ファイルをキャッシュ化するプラグイン。

「MO Cache」じゃないの?と言われそうだけど、ちょっと重いような気がしなくもない。
それに現状のCORESERVERだと「WP File Cache」が安定して動いてくれるとは限らないので、単独で動作するこちらのプラグインにしました。

GZIP Output

GZIP圧縮転送プラグイン。

CORESERVERでも.htaccessの設定でなんとかGZIP圧縮転送できたっぽいんだけど、HTMLソースだけが圧縮されてないっぽいのでこちらのプラグインで対応。
このプラグインがあれば.htaccessで設定しなくてもいいんじゃ?と思ってGZIP圧縮の記述を削除してみたのだけれども、GTmetrixで測定してみるとスコアが下がった。このプラグインはHTMLソースのみ圧縮してるっぽい。

BJ Lazy Load

画像遅延表示プラグイン。

最近まではページ開いた時に画像は全部読み込んじゃってるんだろーと思ってましたが、どうやらダミー画像を指定して読み込みを回避してるみたい。
ただこのプラグインはチェックしてないからどんな動作なのか分からない。けれどChromeでチェックしてみるとスクロール時にリクエストされてるし、体感的にも変化があったので問題なさそう。

追記:何かと干渉してるのかスマホで画像が表示されない事があったので「Unveil Lazy Load」というプラグインに変更。設定もなにもありませんが、シンプルな為か若干こちらのほうが軽そう。

Multi Device Switcher

デバイス別にテンプレートを切り替えるプラグイン。

スマホ向けのテンプレートを指定でき、PC・モバイルの切り替えボタンも設定できる。

無効化中

続いていつか使うかもしれない、無効化中プラグイン。

WP No Category Base – WPML compatible

カテゴリーアーカイブのURLに「category/」が入らないようにする。
カテゴリーURLなら後で変更してもいいかもしれないけど、できればサイト公開前に設定。

今回はタグか固定ページのスラッグか忘れたけど、何かと干渉してしまったので使用を見送り。

Custom Field Template

カスタムフィールドを拡張するプラグイン。
今のところ使い所が分からないというか、普通のブログにはいらないかな?という感じなのでとりあえず入れてるだけ。
例えばゲーム関連のブログで、武器や防具のアイテム等やモンスターの情報を載せまくる!という場合にあると便利なのかもしれない。

Delete Custom Fields

カスタムフィールドを削除するプラグイン。
実験的にちょこっとカスタムフィールドを登録して、消せなかったのでプラグインにて削除。

FeedLogger Edited by kota

Feedの購読者数を記録するプラグイン。
利用者がいるか把握したいなら入れてもいいかも。

Exec-PHP

ページやウィジェットでPHPが使えるようになるプラグイン。
便利そうだけど、セキュリティ的によろしくないらしいので運用時には消したほうがよさそう。気づいたら記事中のソースコードが実行されてた!なんてことになったら大変だ。

サイト公開前の確認や、限定的な範囲でなら使ってもいいかも。

ウィジェットで使いたい場合は「PHP Text Widget」こっちを使って、ページの場合は直接テンプレートを作成したほうがいい感じ。

Delete Revision

リビジョンを削除するプラグイン。
無駄なリビジョンは消してスッキリさせておこう。

リビジョンはpost_idがカウントされてしまうので、リビジョンが不要なら合わせてwp-config.phpの設定もしておこう。
参考:WordPressで「リビジョン」と「自動保存」を止める方法+過去のリビジョンも削除する方法

Theme Test Drive

管理者のみに別テーマを設定できるプラグイン。

使用中のテーマへ追記する前に、テスト用のテーマを割り当てて確認できる。まだ使ってないけど便利そう。

Popular Posts Tabbed Widget for Jetpack

人気のページを表示するプラグイン。

「Wordpress Popular Posts」で既に設定してしまったので今は使ってないけど、便利そうなら乗り換えるかもしれない。

RSS Includes Pages

RSSに固定ページを含めるプラグイン。

固定ページは投稿よりも追記で更新することが多くなりそうで、入れても意味ないかなと思って無効中。
全体のRSSに含めるんじゃなくて、固定ページ専用のRSSを出力できるプラグインはないのかな?投稿だけじゃなく更新も反映されるのが欲しいです。

P3 (Plugin Performance Profiler)

使用しているプラグインのパフォーマンスを確認するプラグイン。

どのプラグインが重いのか確認できて便利。ただ常に有効化する必要はないので、基本無効中

Broken Link Checker

リンク切れ確認プラグイン。

いちいち手動で確認しなくてすむので個人的には超便利。

ただこのプラグイン激重です。公開前のテスト環境で数日有効化にしてたけども、サイトの表示が5秒くらい遅くなった。月一か年一ペースで確認するのが良さそうかな…

Background Update Tester

WordPress本体の自動更新が可能かどうか確認するプラグイン。

CORESERVERは現状無理っぽいです。数ヶ月後には自動更新可能になってる可能性がありますが。

WP Super Cache

ページをキャッシュすることができるプラグイン。

WordPressが重い一番の原因は処理なんですよね。毎回動的に出力するので、キャッシュさせて高速化するのです。サイトによっては危険と隣り合わせな場合もあるみたいですが、正しく設定すれば魅力的で効果的なプラグインだと思います。
「WP Super Preload」と組み合わせると良さそうな感じです。

ただしCORESERVERでは使えませーん>< ファイルの所有者を手動で設定しなおして対応してる方がいたので試してみたのですが、上手く動かなかったです。有効期限後にアクセスしても最キャッシュしてくれませんでした。

バリュードメイン:総合ヘルプ

CORESERVER.JP
・[完了] ハードウェアの刷新(2013年~2014年)
・[準備中] Apache 2系への変更(2014年春頃)
・[準備中] PHP5.4/5.5 系への変更、および、セーフモードOFFでの運用に切り替え(2014年春頃)

ということらしいので、今後挙動が変わって動くかもしれません。なのでそれまで一旦削除中。

メモが随分長くなって記事っぽくなってしまった・・・まさか2ページ分になるとは。メインコンテンツ…かもしれないテキトーな工作より長い。
でもこのくらい書けばまたテンプレ作るときに役に立つはず・・・!
とりあえず今回はこんな感じかな。他に良さそうな感じのカスタマイズ方法やプラグインがあったら紹介していこうと思う(多分)。

工作に飽きてWeb制作したわけじゃないよ!妄想力が足りなくて詰んでるんです。いろいろと。

コメントを残す(仮)

△ページ上部へ