Home > wordpress > [WP]Wordpressテンプレートカスタマイズ用小技メモ

[WP]Wordpressテンプレートカスタマイズ用小技メモ

テンプレートファイルのカスタマイズで使えそうなソースのサンプルをつらつらと書き散らしてみる。その２はこちら。

タイトルの文字数制限

一定数以上のタイトルを省略（抜粋）する。
下記サンプルだと10文字まで拾って以下を三点リーダにしています

PLAIN TEXT
PHP:
  1. <?php
  2.     $title= mb_substr($post->post_title,0,10);
  3.     echo '<h1>'.$title.'…</h1>';
  4. ?>

検索キーワードとヒット数の表示

search.phpとかに入れると結構見栄えがいい。

PLAIN TEXT
PHP:
  1. <?php $allsearch =& new WP_Query("s=$s&showposts=-1");
  2. $key = wp_specialchars($s, 1);
  3. $count = $allsearch->post_count;
  4. if($count!=0){
  5.     echo '<em>'.$key.'</em>で検索した結果、<span class="count">'.$count.'</span>件ヒットしました';
  6. }else{
  7.     echo '<em>'.$key.'</em>で検索しましたが、何も見つかりませんでした';
  8. }
  9.  ?></p>

特定のカテゴリーに投稿された記事だけ表示

重要なのはループの前のquery_postsとループの後のwp_reset_query()。
query_postsを使う場合wp_reset_query()を最後につけないとqueryの指定が後のループに引き継がれる。

カテゴリＩＤ5の本文だけ表示するサンプル

PLAIN TEXT
PHP:
  1. <?php query_posts('cat=5');if (have_posts()) :?>
  2. <?php while (have_posts()) : the_post(); ?>
  3. <div class="post">
  4. <?php the_content(__('Read More &raquo;','my84')); ?>
  5. </div>
  6. <?php endwhile;?>
  7. <?php wp_reset_query();endif;?>

IDで指定した記事の本文だけを表示

あるページ（または記事）の本文だけサイトのトップとかに表示したい時に使える。

functions.php

PLAIN TEXT
PHP:
  1. function site_content($my_id){
  2.     $post_home = get_post($my_id);
  3.     $content = $post_home->post_content;
  4.     $content = wpautop($content);
  5.     return $content;
  6. }

ショートコードに対応させる場合
$content=wpautop($content);の前に、
$content = do_shortcode($content);を追加する。

テンプレートファイル側
引数は表示する記事のID

PLAIN TEXT
PHP:
  1. <?php echo site_content(2);?>

wpautopはpタグとかを自動でつけて整形するwordpress内の関数。(formatting.php内)

カテゴリーで条件分岐

「もしカテゴリーID5の子カテゴリなら」とか「カテゴリースラッグがhogeなら」みたいな条件指定

PLAIN TEXT
PHP:
  1. $category = get_the_category();
  2. if($category[0]->category_parent==5){
  3. //ID5ならtrue
  4. }elseif($category[0]->category_nicename=='hoge'){
  5. //スラッグがhogeならtrue
  6. }else{
  7. //他
  8. }
このエントリをはてなブックマークに追加このエントリをdel.icio.usに追加このエントリをLivedoor Clipに追加このエントリをYahoo!ブックマークに追加このエントリをFC2ブックマークに追加このエントリをNifty Clipに追加このエントリをPOOKMARK. Airlinesに追加このエントリをBuzzurl（バザール）に追加このエントリをChoixに追加このエントリをnewsingに追加

Comments:13

kasumi 08-07-26 (土) 4:46

初めまして。
有用なTipsが多くとても参考になります。
さて、こちらの記事の『IDで指定した記事の本文だけを表示』というものですが
今まで私は同じ目的の為にImproved Include Pageを使用しておりましたが
それをプラグインを使わずに実現できるならば、と思い早速試させて頂きました。
しかし、こちらの方法ですとショートコードはただのテキストになってしまうのですね。。。
素人なのでこの処理にどういった差があるのかはわかりませんが
ショートコードを使ったページを表示させることは可能なのでしょうか?
動作は似ているようで何となくImproved Include Pageと同じ動きをさせるのは大変そうな気がしますが。。。

もしくは自分が実現したい内容というのが
『サイドバーに特定のカテゴリーのエントリーで使用された画像のサムネイルを
エントリー本文へのリンクという形で数件表示』
というものなので、これが実現できれば尚良いのですが。。。
こちらを拝見していてかなり近い内容の記事をいくつか散見したもので
これらを組み合わせて何とかならないものかと。。。
今回のfunctionやImproved Include Pageで引っ張って来たい内容自体理想のものではないので。
どうやらMovable Typeでは簡単なようなのですが
WordPressではプラグイン等も探しましたが今のところ実現する方法が見つからないんですよね。。。
元画像を縮小表示するものだったり記事ではなくオリジナル画像へのリンクだったり。
限りなく近い動作は可能なんですが。。。

ということで、不躾ではありますが何か良い方法など御座いましたらご教授頂ければと思います。
長文失礼致しました。

Tenderfeel 08-07-27 (日) 2:02

kasumiさん＞
こんばんは。ショートコードはサンプルの関数内に
1行追加すれば表示されるようになります。
記事に追加しておいたので試してみてください。

理想とは違うかもしれませんが
『サイドバーに特定のカテゴリーのエントリーで使用された画像のサムネイルをエントリー本文へのリンクという形で数件表示』

これについては新規記事で追加してみたのでご覧ください。

wordpressはPHPなのでPHPさえ分かれば色々遊べて楽しいですよ。
・・・・なんて偉そうなこと言ってますが、私もまだまだ初心者レベルです（笑

kasumi 08-07-27 (日) 16:10

早速のお返事ありがとう御座います!
まず、上記のソースコードですが一行追加するだけで実現できたのですね!
素晴らしいです…!
これでプラグインを一つ減らすことができましたました。

そして『[WP]画像サムネイルを投稿された記事へのリンク付きで表示』の記事拝見させて頂きました。
完璧です。
ずっと探していて実現できなかったことが、それもプラグインに依存せずに実現できるなんて感激です。
しかも多くのプラグインではカテゴリーの指定もできず、メディアライブラリから直接引っ張って来る為に
時系列が記事ではなく、メディアの投稿順となっていたり色々と不便だったのですが
上記記事の方法ですとその点等も含めプラグインに依存しないなどあらゆる面において理想的です。
本当にわざわざ対応頂きありがとうございました! 大感謝です。

最後にPHPに関してですが
元々私はここまで本格的にカスタマイズするつもりはなくてですねw
PHPに関しては全くわからないので
今まではプラグインやこちらの記事のコードなども
文脈からここで値を代入してるのかな?などとあたりをつけてトライアンドエラーで何とかやってきたのですが
WordPressに触れれば触れるほどPHPの重要性をひしひしと感じる次第ですw
一々やりたいことの為にプラグインなどを探しまわらなくてもPHPが分かれば自分で対応できるのでは?とw
その為最近はPHPも少しかじってみようかなあなどとは考えています。確かにw

とにもかくにも
本当に助かりました。
こちらはピンポイントでかなり実用的な情報が多いので他の記事も参考にさせて頂きますね。
今回は本当にありがとうございました!

Tenderfeel 08-07-27 (日) 20:26

kasumiさん＞
あーよかったです。
暑さで朦朧として読解ミスしてないか心配してたので（笑
プラグインは入れすぎると喧嘩することもあるし
数が減らせるならそれに越したことはないですよね。

PHPは文法がjavascriptとよく似ているので、
javascriptがなんとなくでも読めるなら覚えやすいと思いますよ。
私も同時に覚えたのでこれはガチです！

こちらこそいいネタをありがとうございました！

チョッパー 08-10-06 (月) 20:59

こんばんは、久しぶりに書き込みします。
カスタムフィールドの値で記事を並び替えしたいのですが、うまくいかなくて困ってます。
星が多い順番や星が少ない順番で記事を並び替えが出来たら便利だと考えています。
SmartSortが一番近いような気がするのですが、メニューをクリックするとError 404になってしまいます。
http://www.dyasonhat.com/wordpress-plugins/smart-sort-wordpress-plugin-sort-posts-by-custom-field/

PHPをカスタマイズすることで上記のことを実現するのは可能でしょうか？
特定のカテゴリーだけに適用、query_postsと併用可能が出来るといいのですが。
よろしくお願いします。

Tenderfeel 08-10-09 (木) 18:32

チョッパーさん＞

プラグインのことは多分何かエラーになる原因があるのでしょう。
他のプラグインと喧嘩している可能性もあるので、
404になる原因については私の方からはなんともいえません。

カスタムフィールドでの並び替えについてはサンプルを
別記事で投稿しますのでそちらをご覧下さい。

ひろ 09-08-07 (金) 19:57

タイトルの文字数制限（私は、ぱんくずのタイトルを文字数制限した）んですが、
同じようにスクリプトを書いてやってみたのですが、
省略したタイトルの一番最後の1文字だけが「・・・」の前の1文字だけが
◆に？マークが入った記号に変わってしまい、文字化けしてしまいます。
英語表記だと文字化けしていないのですが、日本語表記だと文字化けしています。

例）
文字数制限10文字の場合

日本語の場合

「わーどぷれすのタイト◆・・・」

英語の場合
「WordPressT・・・」

みたいな感じで、日本語が入るとダメなんです。
テーマファイルvicunaの中のphpデータを　文字コードをUTF8 ・ＢＯＭなしで保存しなおして、再度試して
みたんですが、やはり最後の1文字だけ（「・・・」の一文字前のみ）文字化けしてしまいます。

原因が全くわからずで・・・、Tenderfeelさん　この原因っておわかりになられますでしょうか？
すいません。。。

Tenderfeel 09-08-07 (金) 20:35

ひろさん＞

別の文字コードが混入
バイナリコードの混入
機種依存文字の混入

今ぱっと思いつくのはそれくらいです。
対処は…

・文字コード変換を追加してみる
<code>$title= mb_substr(mb_convert_encoding($post->post_title,"UTF-8","EUC-JP,SJIS"),0,10);</code>

・ドット[...]など別の文字にしてみる

・機種依存文字がないか確かめる

以上試してみてください。

ひろ 09-08-08 (土) 0:08

Tenderfeelさん、早速のご回答、ありがとうございます。
早速、教えていただいたコードを挿入してやってみましたが
これだと英語はちゃんと表示できても、日本語部分が全部文字化けしてしまいました。
続いて、ドット[...]など別の文字にしてみるを試してみましたが　変化なしでした。
機種依存文字はないと思うのですが。。。

タイトルを省略せずに、全文（全文字）表示させると　ちゃんと日本語も英語も
全文字きれいに表示しているんですが、　文字数制限をかけると
最後の1文字（「…」の1文字前）だけ
◆に？が入った記号の文字化けです。

試しに、文字数制限を（0,10）　ではなく
(3,10）にしてみると、日本語でも文字化けしていません。　問題なく表示しているんです。

どういう事なんだろう？？？　原因不明ってとこですかね？？？

ひろ 09-08-10 (月) 21:01

あっ、すいません
いけました♪　解決です！

一応、メール送りました！

Tenderfeel 09-08-11 (火) 19:25

mb_languageってのは盲点でした :lol:

ほんわか 11-03-27 (日) 19:05

初めまして、ほんわかです。

wpを触るのが不慣れなため、戸惑っています。
htmlエディタの様にビジュアルで直せるツールとかないですかね。

Tenderfeel 11-03-29 (火) 13:08

ほんわか さん >

ビジュアルエディタに近い感覚で使えるCMSならありますよ
concrete5 http://concrete5-japan.org/

WordpressはPHPなのでDreamweaverでもデザインビュー上で100％再現することは出来ないです。
ライブビューならサイト上で表示されるものと同じ状態で見ることが出来ますが（http://twitpic.com/4ei3ee）
ライブコードの編集はテンプレートを編集するのとは異なるので
結局のところコードビューでテンプレートを直接編集するしかないですね。

お使いのエディタにWordpress用の拡張機能があれば、
それを導入してコーディングをちょっと楽にすることができますよ。

Comment Form
Remember personal info

Trackbacks:7

Trackback URL for this entry
http://tenderfeel.xsrv.jp/wordpress/168/trackback/
Listed below are links to weblogs that reference
[WP]Wordpressテンプレートカスタマイズ用小技メモ from WebTecNote
trackback from SOUSAKUYA-SAI BLOG 08-09-26 (金) 12:28

<strong>WPMU2.6.1でhomeにThumbnailを表示</strong>

php $attachments = get_children(array(’post_parent’ =

pingback from GoogleMapsを利用できるプラグインWP-SimpleGmaps | Oyaji Blog 09-01-19 (月) 22:00

[...] [WP]Wordpressテンプレートカスタマイズ用小技メモ - WebTecNote WordPress › One Click Plugin Updater « WordPress Pluginszipファイル一個だけをFTPでなしにアップして解凍して有効化まで簡単に行えるのが [...]

pingback from query_posts 使用。【追記】 - kappadow.jp 09-07-17 (金) 18:06

[...] query_postsについてイロイロと調べていたらこんな記事を見つけた。 [WP]Wordpressテンプレートカスタマイズ用小技メモ from WebTecNote query_postsを使う場合wp_reset_query()を最後につけないとqueryの [...]

pingback from 《Wp》投稿タイトルに文字数制限をかける « BrainEgg 10-01-25 (月) 12:43

[...] 参考：WebTecNote [...]

pingback from wordpress Memo - wp_reset_query(); 10-03-20 (土) 22:53

[...] で発見したのがこのページ。 重要なのはループの前のquery_postsとループの後のwp_reset_query()。 query_postsを使う場合wp_reset_query()を最後につけないとqueryの指定が後のループに引き継 がれる [...]

pingback from 文字数を制限する。 | Web対策に悪戦苦闘の毎日 10-05-10 (月) 17:18

[...] きます。 概要など、ちょっとだけ入れることができます。 と記述すれば、前から10行目までを表示することができるようです。 ここのサイトを参考にしました。ありがとうございます。 [...]

pingback from 本日のWordPressのカスタマイズ小技メモ | UNDAKOVR Blog - Web周りの黙示録ブログ 11-01-16 (日) 23:25

[...] ググったらいつか使えそうなものを見つけたのでメモ。WebTecNoteさんのエントリー「[WP]Wordpressテンプレートカスタマイズ用小技メモ」と「[WP]Wordpressテンプレートカスタマイズ用小技メモ（２）」からです。こういうTipsを公開している人がいてくれると本当に助かりますね～。下記は必要そうなものだけなので詳細はリンク先を参照。 [...]

Home > wordpress > [WP]Wordpressテンプレートカスタマイズ用小技メモ

Scripts
カテゴリー
Recent Reactions
最近の投稿
最近の修正
Tag Cloud
おすすめサーバー・他

メタ情報

Return to page top