気ままに綴る独学メモ帳
「WordPressで投稿した記事に別途期限日を設定して、その期限日までのカウントダウンタイマーを表示したい」ってな用途に。
晒してるソースはMooToolだけどロジック応用すれば他のフレームワークでも出来るんじゃないかな。
期限日つきの記事を投稿するカテゴリーを作る。サンプルでは「未分類」の名前を変更してNewsカテゴリとして使用。
投稿サムネイルと共に「○○まであと■■日▲▲時間★★分◆◆秒」と表示する。
時間はJavaScriptでリアルタイムにカウントダウンさせる。
更新されない可能性を考慮して、設定期限を過ぎた場合は過去形にしておくことにした。(javascriptで)
期限越えたとき表示する文字列の設定も出来るようにしておく。
以前書いた画像サムネイルを投稿された記事へのリンク付きで表示はギャラリーにある画像を表示するものなのだけど、
Wordpress2.9には投稿サムネイルっていう便利機能が備わっているんだよね。
そろそろ投稿サムネイル使う関数に書き直さねば…と思っていたらフォーラムにそんな感じの質問が投稿されていたのでｗ さらっと書いてみた。
関数はループ外の使用が有効なので、トップに更新情報を出すもよし、サイドバーに表示するもよしです。
仕様上リスト要素しか出力されないんで、タイトルとか適当につけてください。
<h3>新着記事</h3>
<div id="newposts">
<?php postthumb_ancherlinks('category=16,15');?>
</div>
デフォルトテーマに書いた超適当なソースだけど以下ポイント。
画像がない場合はnoimageというクラスがli要素に付くので、[No Image]画像を背景として指定。
サムネイルのサイズと同じpaddingとwidthを指定して整える。
サムネイルとタイトルの間には改行が入らないので、サムネイルかタイトルをブロック要素にして改行。
#newposts ul {
padding:0;
}
#newposts li {
list-style:none outside;
padding:0;
display:inline-block;
text-align:center;
}
#newposts li img {
display:block;
}
#newposts li.noimage {
background:url(images/noimage.png) no-repeat top center;
padding-top:100px;
width:100px;
}
WordPressに新しく実装された投稿サムネイル用のタグthe_post_thumbnail()は出力されるのが画像だけなんだけど、
これにページへのリンクとか拡大画像とかのリンクをつけたいと思うことがあったので関数作った。
構文：
the_linked_post_thumbnail($size = 'medium', $linkto = 'image', $attr = NULL)
$size
画像のサイズ。文字列（thumbnail, medium, large, full）か配列（ array(32,32) ）で。
$linkto
リンク先。image＝フルサイズの画像url、page＝投稿記事、NULL＝リンクしない
$attr
画像の属性。連想配列形式で指定する
$default_attr = array( 'class' => "zoom", 'title' => 'クリックで拡大', );
ページタイトルとかパンくずナビとかがリンクしてないのが気持ち悪かったので、
WordPressのタイトル周りの統一感を出す関数を作ってみたYO。
タイトルだと「ページタイトル » カテゴリー等 | サイト名」 になり、
パンくずでは「ホーム > カテゴリー等 > ページタイトル」になる。記号はお好みで変更可。
$localから始まるグローバル変数はテンプレートページ内のどこでも使用出来る。
以前書いた記事 [WP]画像サムネイルを投稿された記事へのリンク付きで表示 の応用編です。
ページテンプレートをちょっと弄って、画像のサムネイルがずらっと並ぶ一覧ページを作る方法について解説します。
表示するのは、記事に投稿された画像（のサムネイル）・記事タイトル・カテゴリー名、の３つとします。
記事に関連付けられていない画像（ライブラリから引っ張った画像）は表示されません。
※上記のサンプル画像のwordpressでは、サムネイルの最小サイズを100x100pxの切り抜き設定にして、それを表示しています。
※記事のギャラリーに投稿された画像のサムネイルを利用するもので、
2.9で実装された投稿サムネイル機能とは全く別物です。ご注意ください。
テンプレートカスタマイズするときに使えそうなソースをつらつら書き散らすよ！（その１・その２）
自作関数ネタが多いです。
デフォルトだとheadにwordpressが自動でgeneratorを追加しますが
<meta name="generator" content="WordPress 2.7" />
meta name=”generator”はセキュリティ的に入れない方がいいと言われてます。
これ入ってるとバージョンアップサボってるのもモロバレ。（ex：このブログ）
アクティブテーマのfunctions.phpに以下１行追加
remove_action('wp_head', 'wp_generator');
remove_action()関数は必要のない動作を一発で消す事が出来るので覚えとくと便利。
プラグイン使わなくても一応出来るよ。ってことで。
functions.php
function getCustom($key,$id) {
$custom = get_post_custom_values($key, $id);
if(count($custom)!=1)
return implode("<br />",$custom);
else
return $custom[0];
}
値が複数ある場合は改行でくっつけてから帰します。
テンプレートファイルのループ内
print getCustom("key",get_the_ID());
the_ID()使うならループ内、変数とかに入れておけばループ外でもいける。
直接テンプレートファイル内に関数の部分入れて処理しても良い。
テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その１はこちら。
今回はテクニカルなものが多いかもしれない。
ページとかカテゴリー単体にリンクしたい場合には、get_category_link()及びget_permalink()を使う。
引数はそれぞれカテゴリーＩＤとページＩＤです。
<ul id="glovalnavi">
<li><a href="<?php echo get_option('home'); ?>" rel="index" title="<?php _e('Go to site top.'); ?>">HOME</a></li>
<li><a href="<?php echo get_category_link(1);?> " rel="category" title="<?php _e('View all posts in Event information.'); ?>">イベント情報</a></li>
<li><a href="<?php echo get_permalink(1); ?> " rel="page" title="<?php _e('Sample Page.'); ?>">ページ</a></li>
</ul>
single.phpとかにHOMEとカテゴリと記事タイトルのリンクを出すだけで作れます。
ループ内に以下のソースを入れる。
<p><a href="<?php bloginfo('home'); ?>" title="<?php _e('Home'); ?>"><?php _e('Home'); ?></a> > <?php the_category(' | ') ?> > <span><?php the_title(); ?></span></p>
もっと実用的にタイトルと連動させるならこの記事の関数が便利だと思う。
質問された、カスタムフィールドで設定した値で記事を並び替えて表示するサンプルを晒してみる。
オススメ度とかでランキングっぽいことしたい時に使えるのか・・・な？
やってることはarray_multisortによる多次元配列のソートです。
サンプル関数の使い方は次の通りです。
以上。
サンプルソースは用途に応じて適当に変更するといいと思います。
参考ページ
追加
wordpressのオリジナルテーマ作成について語ってみるテスト。
ブログっぽいWebサイトテンプレートを作ったので、これを利用して作る方法を追う。
同タイトルの連番シリーズになっています。合言葉は「欲しいテーマが無いなら作ればいいじゃない！」
この記事は配布テンプレダウンロードからheader.phpとfooter.php作成まで。
全体で出てくる主な内容
用意するもの
テーマのテンプレートファイル構造がいまいちよく分からないという方は
事前にテンプレートファイルの仕様と構成を見ておくと分かりやすくなるとおもいます。
ファイルの編集は一応wordpressのテーマエディタでも出来なくはないです。
注意
記事で使われた画像を使って、記事へのリンクをテンプレート、またはサイドバー内に表示する方法について。
ver2.7でも動きます。
ver2.9の投稿サムネイル機能を使う関数はこちらにあります。
使うとこんな感じになる▼
以前書いた画像のサムネイル表示（ループ内）の応用です。
この記事の関数は特定のカテゴリ下にある画像に絞っています。
全てのカテゴリーに対応したい場合はこちらの記事をご覧下さい。
テンプレートファイルの役割やら構成なんかについてのまとめ。そこそこ初心者向け。
WordPressのデザインはテーマと呼ばれてます。テーマを構成するファイル群がテンプレートファイルです。
他のブログのようにテーマをテンプレートと呼んでも通じるけど、検索するときはテーマ(Theme)を使う方が良いかも。
ダウンロードしたばかりだと”Classic” と “Default”の２つがプリインストールされてますが、
テーマ新しく追加する場合は、ダウンロードして解凍したテーマのフォルダをWordpressのwp-content/themes/にアップロードするだけ。
デザイン（表示）に並ぶテーマのスクリーンショットをクリックすれば即座に変更されます。
テーマ変更で再構築が必要ない、というのがWordpressの良いところ。
WordPressは1.x系、2.0.x系、2.1.x系、2.2以降と2.5以上では内部仕様が違ってるので、テーマやプラグインはバージョンにあったものを選ばないとエラーが出たりするので注意。
特に2.7は最新とあって対応してるテーマやプラグインもまだ少ないようです。
公式のリスト»
WordPress 2.7 Theme Compatibility List
WordPress 2.7 Plugin Compatibility List
ver2.5→ver2.7に修正
WordPressはコアファイル・プラグイン等全てPHPなので、PHPとmySQLに通じていればかなり色々なことができます。
テーマを構成するテンプレートファイルは、XHTMLとPHPのテンプレートタグで作成されてます。
XHTMLとUTF-8で記述するのがベターですが、HTMLでも文字コードさえ合ってれば問題はないです。
文字コードはWordpress2.5ではUTF-8のみになりました。
テキストエディタはBOM無しのUTF-8で保存できるものを選ぶ必要があります。(メモ帳はダメ！絶対）
テンプレートに記述するWordpress独自のPHPコードはテンプレートタグの他、ループやファンクションなどかなり色々使えます。
PHPの関数や変数なんかも使えます。
WordPress2.5～2.6のメディアアップロードでは画像のサムネイルサイズに小・中と２種類増えたことで、
フルサイズを含めて３種類になったわけだが、フルサイズで画像を投稿に挿入したとき何もしてないと
横幅の最大が500ｐｘで固定されてしまうことがある。
500ｐｘ以上にしたい場合は、アクティブなテーマのfunction.phpに次のコードを記述する。
$GLOBALS['content_width'] = 800;
画像でレイアウトを崩されたくない場合などには設定しておくと良いと思う。
プラグインと同じくテーマもmoファイルで翻訳可能らしいので作り方メモ。
幅広く使ってもらうテーマを作るなら必須と言える。
プラグインの翻訳もほぼ同じ。
翻訳には言語ファイルの編集ソフトが必要。
有名なのはpoEditだろうか。
さらっとpoEditの使い方を書くと
