気ままに綴る独学メモ帳
「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に標準搭載されているGalleryショートコードでは、
HTMLエディタの時は［gallery］なんだけど、ビジュアルエディタにした時には画像が表示されるようになっている。
ギャラリーに限らずとも、この置換が再現出来れば自作したショートコードの見やすさが段違い。
で、実際やってみたら今まで記事に書いた事の範囲でさっくり出来てしまったので、
アクティブテーマディレクトリ下にあるイメージディレクトリのURLを出力するショートコードを例にして、方法を書いてみます。
2019年時点ではこのコード動かないので、TinyMCE(v5)バージョンも書きました
ページタイトルとかパンくずナビとかがリンクしてないのが気持ち悪かったので、
WordPressのタイトル周りの統一感を出す関数を作ってみたYO。
タイトルだと「ページタイトル » カテゴリー等 | サイト名」 になり、
パンくずでは「ホーム > カテゴリー等 > ページタイトル」になる。記号はお好みで変更可。
$localから始まるグローバル変数はテンプレートページ内のどこでも使用出来る。
WordPress2.7は画像に「大サイズ」が加わって全部で４種類になりました。
記事から投稿された画像を出力する内容のエントリーはこれまでに何度か書いてますが、
wp_get_attachment_image() を利用して画像をゲットする関数を作ったので晒しておきます。
関連記事
テンプレートカスタマイズするときに使えそうなソースをつらつら書き散らすよ！（その１・その２）
自作関数ネタが多いです。
デフォルトだと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()使うならループ内、変数とかに入れておけばループ外でもいける。
直接テンプレートファイル内に関数の部分入れて処理しても良い。
WordPressのビジュアルエディタに自作したボタンを追加する方法についてのメモです。
TinyMCEのプラグイン作成手順メモにもなっています。
ver2.5以下は確認してないのでどうだか分かりません。多分TinyMCEのバージョンが違うので動かないと思います。
ver2.7は動きました。
ver2.9も動きました。
サンプルとして▼こういうテーブルをボタン１発で追加出来るようにします。
| Name | |
|---|---|
| Address | |
| TEL | |
| FAX | |
| URL |
プラグインとかで記事のテンプレートを作っておくという手もあるけど、ボタン挿入の方が汎用的に使えるので楽です。
エディタへのテキスト挿入以外にもいろいろな事がやれます。
結構面倒くさいので初心者向きではありません。
あとついでにエディタ内のスタイル変更についても解説しています。
なお、この方法はTinyMCE Advancedの影響を受けません。
セレクトメニューについて追記
テンプレートカスタマイズに使えそうなソースをつらつらとまた書き散らす。その１はこちら。
今回はテクニカルなものが多いかもしれない。
ページとかカテゴリー単体にリンクしたい場合には、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>
もっと実用的にタイトルと連動させるならこの記事の関数が便利だと思う。
記事で使われた画像を使って、記事へのリンクをテンプレート、またはサイドバー内に表示する方法について。
ver2.7でも動きます。
ver2.9の投稿サムネイル機能を使う関数はこちらにあります。
使うとこんな感じになる▼
以前書いた画像のサムネイル表示（ループ内）の応用です。
この記事の関数は特定のカテゴリ下にある画像に絞っています。
全てのカテゴリーに対応したい場合はこちらの記事をご覧下さい。
「ページスラッグ編集するエリアが見当たらないんだけど・・・・」っていう質問は本家でもよく書かれてます。
Wordpress2.5～2.6はタイトルの下にページスラッグ編集エリアが出ますが、多くの場合表示されてません。
普通はどうやったら出るようになるのかというと、オプション設定の「パーマリンク設定」で、
パーマリンク構造内に %postname%か%pagename% を含む場合のみ表示されるようになります。
表示されるタイミングは、タイトル入力後かオートセーブか何かで下書きが保存された時点ですが、
パーマリンク構造に%postname%が含まれてなければスルーされる。
で、コレではあまりに不便。
このブログは%postname%使わないリンク構造してるけど、ページスラッグも変更しときたいなァ・・・とか思って
常に表示させる方法を我々スタッフが総力を挙げて探しました。
その結果・・・無事見つけ出すことが出来ましたよ！
●Wordpress2.7について
ver2.7ではクイック編集でパーマリンク設定に拠らず変更が可能です。
wordpress2.5から実装されたショートコードについて。
ショートコードというのは、タグの簡易版みたいなものです。プラグインではよくお目にかかります。
2.5から本文中に［gallery］と入力すると、その記事でアップロードされた画像がサムネイルで一覧表示される機能がありますが、こういうのを自作できるわけです。
胡散臭いまとめは信用ならねぇ、という方は公式サイトの説明を見てください。
※この記事は本家解説の完全翻訳はしてません
下のソースをアクティブになってるテーマのfunction.phpにコピペする。
function bartag_func($atts) {
extract(shortcode_atts(array(
'foo' => 'no foo',
'baz' => 'default baz',
), $atts));
return "foo = {$foo}";
}
add_shortcode('bartag', 'bartag_func');
▼投稿画面で次のタグを記入すると、それぞれ違う出力結果になります。
[ bartag ]と本文に投稿→foo = no foo
[ bartag foo=”bar” ]と本文に投稿→foo = bar
テンプレート内でサムネイルを表示する方法について。
サムネイル（中）をカテゴリーで表示したいと思ったとき、自動でサムネイル作られるならそれ表示するようにすればいいじゃん、と思いませんか。
でもwordpress2.5～2.6ではthumbnailが小、mediumが中という分け方をしてるが、ファイル名にはなぜかファイルサイズが付く。
ギャラリーというサムネイル自動表示の新機能があるんだけど、ショートコードだからテンプレートのソースコードでは使えない。
ファイル名は*-thumbnail.jpgとか*-medium.jpgとかでいいじゃん、という気がする。
というかむしろそちらの方が便利だと思う。ので修正されないかなあ…（期待）
自動作成された、これら名前のバラバラなサムネイルをテンプレートで自動取得する方法があった。