Home

Scribble

WordPressプラグインWP-PostRatingsでソート順を変える

通常はプラグイン有効化後、下記コードを表示させたい箇所へ設置するだけで簡易にレーティング結果が表示できる。

<?php if (function_exists('get_highest_rated')): ?>
<ul><?php get_highest_rated(); ?></ul>
<?php endif; ?>

しかしこれだとタイトルテキストとリンクがリスト表示されるだけで、日付やカテゴリの表示等ができなかった。
散々googleで検索したが解決方法が見つからない…

そもそもWP-PostRatingsはどーやってレーティングの値を取っているのか?
もしやと思いカスタムフィールドを見てみると[ratings_score]で値が入っている
ならこの値でソートしてやればプラグイン用のタグを挿入しなくてもレーティング結果が表示できるのではと思い、カスタムフィールドでソートする方法を探す。

query_posts('meta_key=ratings_score&orderby=meta_value');

上記でカスタムフィールドでのソートが可能になるが、meta_valueだと文字列としてソートされてしまう。
[ratings_score]に入っているのは数字なので数字でソートしないと意味が無い。

query_posts('meta_key=ratings_score&orderby=meta_value_num');

上記で数字としてソートが可能になります。
あとは並び順やカテゴリ指定などで思い描いていた表示ができました。

order=DESC…降順(3, 2, 1)(c, b, a)
order=ASC…昇順(1, 2, 3)(a, b, c)

カテゴリーIDが1の記事レーティングが高い順にランキングを表示をする場合の記述。

<ul>
<?php query_posts('cat=1&orderby=meta_value_num&meta_key=ratings_score&order=DESC'); ?>
<?php if(have_posts()) while(have_posts()) : the_post() ; ?>
<li><?php the_time() ?> <a href="<?php the_permalink() ?>"><?php the_title() ?></a></li>
<?php endwhile; wp_reset_query(); ?>
</ul>

WordPressプラグインCustom Field Templateで項目を必須にする

必須にしたい項目に class = required を設定する。

次にグローバル設定にて「jQuery バリデーションを使用する」にチェックを入れる。

記事を新規作成し必須のフィールドを未入力で公開ボタンを押すと下記のようにアラートが表示されます。

WordPressプラグインWP-PageNaviを固定ページでもページングさせる方法

WP-PageNaviプラグインを利用しアーカイブページのページングは容易に実装できたのですが、固定ページ内でページングを利用しようとするとページナビは表示されるがリンクしてもページ内容が変わらないという事態に…
どうやら固定ページ内で利用する場合query_postsの記述の仕方を少し変えるだけで対応できそう。

<?php query_posts('posts_per_page=5&paged='.$paged); ?>
<ul>
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<li><?php the_title(); ?></li>
<?php endwhile; endif; ?>
</ul>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<?php wp_reset_query(); ?>

上記コードでとりあえず解決。

WordPressの検索結果ページに検索内容と検索結果件数を表示する

search.phpなどに下記コードを記述しておけば表示される。

<?php
$allsearch =& new WP_Query("s=$s&showposts=-1");
$key = wp_specialchars($s, 1);
$count = $allsearch->post_count;
echo '<h1>&#8216;'.$key.'&#8217; で検索した結果:'.$count.' 件</h1>';
?>

アップロードした画像のサイズバリエーションを増やす

wordpressでメディア画像のサイズバリエーションを増やしたい場合、functions.phpに下記コードを追加。

add_image_size( $name, $width, $height, $crop )
  • $name … サイズ名
  • $width … 画像の幅:整数(px)
  • $height … 画像の高さ:整数(px)
  • $crop … サムネイルを実寸法にトリミングする場合はtrue、そうじゃない場合はfalse

50 x 50 の画像を追加したい場合は

add_image_size( 'new_size', 50, 50, true );

アイキャッチ画像を使用する

wordpressにてアイキャッチ画像を使用する場合、
テーマ内のfunction.phpに下記ソースコードを加えるだけ

function mysetup() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

加えたら書き出したい場所へ

<?php the_post_thumbnail(); ?>

を挿入。

パスの角を丸くする for Illustrator CS5

角丸な複雑な図形を作りたい、後から角を丸くしたいなど意外に多用する画面が多かったのでメモる。

1.[効果]→[スタイライズ]→[角を丸くする]

[効果]→[スタイライズ]→[角を丸くする]

2.半径を指定

半径を指定

プレビュー上は角が丸くなってますが、まだこの状態ではパスが丸くなっていません。

3.[オブジェクト]→[アピアランスを分割] を行ってパスにも角丸を反映させます。

[オブジェクト]→[アピアランスを分割]

4.完了

完了

Yahoo知恵袋APIを使用し、Q&Aサイトを作る

  • 2013-02-05 (火)
  • PHP

Yahoo知恵袋にAPIの利用方法と簡単なサンプルはある。

しかしこのサンプルだと表示するカテゴリは選択できてもキーワードでFAQを引っ張ってくることができない。

色々検索しては試しを繰り返してたどり着いたのが
Yahoo知恵袋からWeb APIを使用してQAの結果を取得サンプル | ITコンサルタントのつぶやき

コメント欄にサンプルソースが書かれていたので試してみたら…動かない…
試行錯誤しh()メソッドを外してみると動いた、プログラミングに明るくないので外した際の不具合とかよくわからないがとりあえず動いたのでメモっとく。

<?php

mb_internal_encoding("UTF-8");
$yahooappid = "【APIコード】";

$type = 'all';
$condition = 'solved';
$sort = '-posteddate';
$results = "10";

$keyword4url = urlencode($keyword);
$url="http://chiebukuro.yahooapis.jp/Chiebukuro/V1/questionSearch?appid=$yahooappid&condition=$condition&sort=$sort&results=$results&query=$keyword4url";

$xml=simplexml_load_file($url);
$hits=$xml->Result->Question;
?>

上記コードを<html>以前に設置し、下記コードをFAQの表示したい箇所へ配置するだけ。

<?php foreach($hits as $hit){ ?>

<h4><?php echo $hit->Content; ?></h4>
<p><?php echo $hit->BestAnswer; ?><a href="<?php echo $hit->Url; ?>">詳しくはこちら</a></p>
<p>質問日時:<?php echo date("Y/m/d H:i:s", strtotime($hit->PostedDate)); ?>&nbsp;回答数:<?php echo $hit->AnsCount; ?></p>

<?php } ?>
$type
all:全クエリー文字を含む検索結果
any:クエリー文字のうちいずれかを含む検索結果
phrase:クエリー文字を文章として含む検索結果
$condition
all:すべての質問
open: 回答受付中
vote: 投票受付中
solved: 解決済み
$sort
-posteddate:質問日時順で降順にソート
+posteddate:質問日時順で昇順にソート
-anscount:回答数順で降順にソート
+anscount:回答数順で昇順にソート
$results
返却結果の数

PDFファイルをAcrobatでアウトライン化する

修正してくれと渡されたチラシのPDF、イラレで開くも使われているフォントが入っていなくこのまま修正するには手間がかかりそう。
とりあえずアウトライン化できれば後はごまかせそうだったので、何か良い方法がないか調べてみるとありました。

①中身のないPDFファイル(サイズとか適当)を作成します。
イラレ等で新規作成してPDF形式で保存するだけ。

②アウトライン化したいPDFをAcrobatで開く。

③[文書]→[透かし]→[追加]から「ファイル」を選択。
①で作成したファイルを選択。不透明度は100%以外。

④[アドバンスト]→[印刷工程]→[分割・統合プレビュー]から「すべてのテキストをアウトラインに変換」へチェックを入れる。
「文書内すべてのページ」を選び適用。

⑤ [ファイル]→[プロパティ]→[フォント]からフォント情報がなくなっていればアウトライン化完了。

これで無事修正作業を終わらせられました。
イラレの元データがあるのが一番いいんですけどね…

CSS3グラデーションジェネレータ[Ultimate CSS Gradient Generator]


Ultimate CSS Gradient Generator

グラデーションをCSSで表現したい、複雑なグラデーションを表現したいなどグラデーションジェネレータの決定版と言っても良いくらいのサイトです。
しかも吐き出すコードにIE9まで対応しているという優れもの。(自分はCSS3を使う場合は完全にIEは捨てますが…)

CSS3を使ったボタンを簡単に作成できるサイト[CSS3 Button Generator]

CSS3 Button Generator
CSS3 Button Generator

ボタンを作成するときにものすごい重宝します。
角丸、ドロップシャドウ、グラデーションとジェネレーターで簡単に設定でき、出来上がったソースコードをコピペするだけで容易に綺麗なボタンの設置が可能です。

自動で挿入されるPタグやBRタグの無効化

WordPress には HTML エディタ入力において、改行には BR タグを入れてくれたり連続する改行には自動で P タグに変換してくれたりと、HTML の知識がない人でも簡単に作成・更新ができ便利なのですが、たまにこれが邪魔に思えてしまう場合がある。とくに HTML の知識がある人がそう感じるのかな。

この自動でタグを挿入されるのを無効化することも可能

function.php に下記の一文を挿入するだけ

the_content のタグ挿入を無効化したい場合は

remove_filter('the_content', 'wpautop');

the_excerpt のタグ挿入を無効化したい場合は

remove_filter('the_excerpt', 'wpautop');

SWFObject を使って Flash を表示させる際に z-index が効かない

今や当たり前になった SWFObject を使っての Flash 表示
今頃こんなところでつまずいた。。。
一部のブラウザで z-index が効かねー
しかも環境によっては効く場合があるみたい
実際 Mac の Firefox では効いているのに XP では効かないとか

SWFObject 自体バージョンが多数あり、今回使用したのは SWFObject v1.5

んで調べてみたら一文を追記するだけで解消された

<div id="flash-wrap">
<p>代替えテキスト</p>
</div>
<script type="text/javascript">
var so = new SWFObject("swf_image.swf", "mymovie", "960", "320", "9", "#FFFFFF");
so.write("flash-wrap");
</script>

いつも通り上記のような記述で使用したら z-index が無効になる場合が発生したので、下記の一文を追加

so.addParam("wmode", "transparent");

んで、ここで注意が必要で【so.write(“flash-wrap”);】よりも前に記述しなければならず、後に記述してしまうと効果がない

前後記事へのリンクを指定文字に変換・同一カテゴリー内でループ

single.php 内にある次の記事と前の記事へのリンクはデフォルトのままだと記事タイトルとリンクが自動的に挿入されてしまう。
記事のタイトルが長い時など使いづらい場合が多いので、指定文字に変えたり画像に変更ことができれば都合が良いと思って試してみた。

<?php previous_post(); ?>
<?php next_post(); ?>

デフォルトの上記ソースがある箇所を下記ソースへ差し替えるだけ

<?php
$prev = get_previous_post($in_same_cat = true);
if ($prev) {
echo "<a href=\"".get_option('home')."?p=".$prev->ID."\">";
echo "<span>前のエントリ</span>";
echo "</a>\n";
}
?>
<?php
$next = get_next_post($in_same_cat = true);
if ($next) {
echo "<a href=\"".get_option('home')."?p=".$next->ID."\">";
echo "<span>次のエントリ</span>";
echo "</a>\n";
}
?>

「get_previous_post」と「get_next_post」の第一引数を $in_same_cat = true にすることで同一カテゴリー内でループしてくれる。カテゴリー関係なくリンクさせたい場合は「$prev = get_previous_post();」「$next = get_next_post();」にすればいいだけ。

複数のバナーの中から重複することなく任意の枚数だけランダムにリスト表示させる JavaScript

まずは画像パスの配列設定

IMAGES = new Array(
'<img src="http://www.hogehoge01.jp/banner.gif" alt="hogehoge01" />',
'<img src="http://www.hogehoge02.jp/banner.gif" alt="hogehoge02" />',
'<img src="http://www.hogehoge03.jp/banner.gif" alt="hogehoge03" />',
'<img src="http://www.hogehoge04.jp/banner.gif" alt="hogehoge04" />',
'<img src="http://www.hogehoge05.jp/banner.gif" alt="hogehoge05" />',
'<img src="http://www.hogehoge06.jp/banner.gif" alt="hogehoge06" />'
);

続いてリンク先の配列を設定
上記で設定した画像の配列と表示画像と飛ばしたいリンク先を揃える

LINKS = new Array(
'http://www.hogehoge01.jp',
'http://www.hogehoge02.jp',
'http://www.hogehoge03.jp',
'http://www.hogehoge04.jp',
'http://www.hogehoge05.jp',
'http://www.hogehoge06.jp'
);

最後にリスト表示させるための設定

for(i=0; i<IMAGES.length; i++){
var tmpA, tmpB, tmpC, tmpD, rnd;
rnd=Math.floor(Math.random() * IMAGES.length);
tmpA=IMAGES[i];
tmpB=IMAGES[rnd];
tmpC=LINKS[i];
tmpD=LINKS[rnd];
IMAGES[i]=tmpB;
IMAGES[rnd]=tmpA;
LINKS[i]=tmpD;
LINKS[rnd]=tmpC;
}
document.open();
document.write("<ul class=\"banner\">");
for(i=1; i<7; i++) {
document.write("<li><a href=\""+LINKS[i-1]+"\">"+IMAGES[i-1]+"</a></li>");
}
document.write("</ul>");
document.close();

for(i=1; i<【n】; i++) の【n】は表示件数+1の数字を記述
5件表示の場合はfor(i=1; i<6; i++) 、10件表示の場合はfor(i=1; i<11; i++) になる

WordPressで外部RSSから一覧作成

外部の wordpress ブログから最新記事一覧を引っ張ってこなくてはならなくなり、プラグインを使用せずにPHPで解決できないか探してみた

どうやら WordPress には RSS を簡単に引っ張ってきてくれる関数 get_rss()、wp_rss() があるけれど、自動で整形された結果が返ってくるだけなので多少デザインを弄りたいのでパス

んで下記のソースを発見

しかしコレこのままでは日付ないし、RSS元の記事タイトルがないとその箇所だけすっぽりと抜けてしまうので、記事タイトルがない場合は任意の文字を表示させてやり、日付をつける記述を追加する

記事タイトルのほうはそれほど時間が掛からずになんとか対応はできたけど、日付がどーにもうまくいかない

どうやら受け取るRSSの日付データが[pudDate]で囲まれてるのでそれに対応してやらないとだめらしい

<?php
include_once(ABSPATH . WPINC . '/rss.php');
define('MAGPIE_OUTPUT_ENCODING' , 'UTF-8');
define('MAGPIE_CACHE_DIR' , './cache');
define('MAGPIE_FETCH_TIME_OUT', 30);
define('MAGPIE_CACHE_AGE', 60*60);
$rss = fetch_rss('【FeedsURL】');
$maxitems = 5;
$items = array_slice($rss->items, 0, $maxitems);
?>
<ul>
<?php if (empty($items)) echo '<li>No items</li>'; else foreach ( $items as $item ) : ?>
<li><?php $item_date = $item['pubdate'];
$out_item_date = date('Y.n.j', strtotime($item_date));
echo $out_item_date; ?>
<a href='<?php echo $item['link']; ?>' target="_blank"><?php echo $item['title']; ?></a></li>
<?php endforeach; ?>
</ul>

swfobject.js を使って FLASH を表示させてみた

今更感はアリアリだけれど、ここ 2,3 年はアレルギーのごとく Flash には近づかなかったので仕方がない。しかしやむなく Flash を設置しなければならない案件がありまして久々に弄ってみた。
設置方法も js で書き出したほうがいいよー的な感じに移行し始めた時期で知識が止まっているので少し調べてみたら swfObject.js 関連の記事が多いこと、今はこれが主流なのかね?って結構前記事が多いな、俺が知らなかっただけか。とりあえず多いならとコレを実装してみることにした。

swfObjecを使用するtメリット

  • IEのクリックしてくだしあを回避
  • flash プレイヤー未搭載 PC での代替表示
  • ソース上は代替表示の記述があるので SEO 対策にもなるのかな
  • 現行主流ブラウザにほぼ対応?

設置方法

下記 URL から swfObject.js をダウンロードする

設置したいページの箇所へ下記ソースを記述する

<script type="text/javascript" src="swfobject.js"></script>
<div id="flash-wrap">
<img src="no_flash.jpg" />
</div>
<script type="text/javascript">
swfobject.embedSWF("test.swf", "flash-wrap", "246", "60", "7.0.0");
</script>

swfobject.embedSWFメソッド内にて表示させるflashの細かい設定が可能
swfobject.embedSWF(“swf ファイルのパス”, “div で定義した id”, “横幅”, “縦幅”, “flashのバージョン”);

しかし今回の案件は別に Flash を使用する必要性は俺的には皆無だったので乗り気ではなかったが、やはり数年で知識って埋もれていくのね。日々勉強しなきゃだわ

PHP を使い XML ファイルからランダムで指定件数のリンクを書き出す

ランダムリンクを一つではなく複数表示させる方法
.txt から読み込む方法もあったけれど、半角スペース等で区切らなければならず記述時にミスを招きそうなので XML にした

過去同じようなことをやったのだけれど、その元データをなくしてしまい、ググってもなかなか見つからず泣きそうだタ。。。

以下に PHP の記述
※ PHP と XML の文字コードが一緒という前提で

<?php
# XMLのURL指定
$rdf_url = "./link_rand.xml";
# XMLのデータを取得
$content = file_get_contents($rdf_url);
# 文字列を変換 ※XMLとPHPの文字コードが異なる場合にのみ
# $content = mb_internal_encoding("UTF-8");
# XMLを解析
$datas = analyze_rdf($content);
# ランダムな配列を取得
$rnd = random_conts(count($datas));
# XMLファイルを解析するための関数
function analyze_rdf($cnt) {
# <item> ~ < /item> を切り出す
$ptn = '/<item[^>]*>(.+)<\/item>/sU';
preg_match_all($ptn, $cnt, $matches);
# マッチしてれば
if (count($matches) > 0) {
# 配列に入れる
$items = $matches[1];
} else {
return FALSE;
}
# パターンの指定
$ptns["title"] = '/<title>(.*)<\/title>/sU';
$ptns["link"] = '/<link>(.*)<\/link>/sU';
$return_array = array();
# 各インスタンスの抜き出し
foreach ($items as $val) {
$res = array();
preg_match($ptns["title"], $val, $matches);
$res["title"] = $matches[1];
preg_match($ptns["link"], $val, $matches);
$res["link"] = $matches[1];
$return_array[] = $res;
}
# 配列を返す
return $return_array;
}
# ランダムを生成するための関数
function random_conts($count) {
$tmp_array = array();
# $count個分の配列を生成
for ($i = 0; $i < $count; $i++) {
$tmp_array[] = $i;
}
# 配列をシャッフルして返す
shuffle($tmp_array);
return $tmp_array;
}
# HTMLに整形するための関数
function make_html($data) {
$str .= "<a target=\"_parent\" href=\"" . $data["link"] . "\">";
$str .= "" . $data["title"] . "</a>";
return $str;
}
?>
<ul>
<li><?php print make_html($datas[$rnd[0]]); ?></li>
<li><?php print make_html($datas[$rnd[1]]); ?></li>
<li><?php print make_html($datas[$rnd[3]]); ?></li>
<li><?php print make_html($datas[$rnd[4]]); ?></li>
<li><?php print make_html($datas[$rnd[5]]); ?></li>
<li><?php print make_html($datas[$rnd[6]]); ?></li>
</ul>

そして読み込む XML の記述は以下

<?xml version="1.0" encoding="UTF-8"?>
<item>
<link>http://www.kz-k.jp/</link>
<title>Creators KZ-K</title>
</item>

<item>~</item>を増やすだけ

参考にしたサイト

検索結果に記事だけを表示させる

検索結果にページも含まれてしまい、どうにか記事だけに絞れないかとグーグル先生に聞いたところ細かな検索設定ができるプラグインなんかもあったが、プラグインを導入しなくても可能らしいので試しメモメモ

function.phpへ下記コードを追加

function searchQueryHook(){
global $wp_query;
if( !is_search() || !empty( $wp_query->posts ) ) return;
$wp_query->query_vars['post_type'] = 'post';
}
add_action( 'pre_get_posts', 'searchQueryHook' );

参考にしたサイト

無事記事だけ検索結果に表示させることができた

まだ全てのページでチェックしたわけではないのでどっかしらに不具合とかでないかしら
まぁ大丈夫でしょう

php での税込・税抜価格の計算と千位毎の区切りにカンマを入れる方法

価格表示を税抜きと税込み 2 つ記述するのはしんどいので php で計算して表示してしまえばいいじゃないかと

<?php
$y = 1050;
$z = 1.05;
$x = $y / $z;
echo "税抜き価格:$x 円";
?>

割り切れる数値ならば上記で事足りるが、かならず割り切れない数字がでてくる

割り切れない場合、切り捨て・切り上げ・四捨五入の3パターン
使用する関数は切り捨ての場合は【floor】、切り上げの場合は【ceilr】、四捨五入の場合は【roundr】をそれぞれ使用する

<?php
$y = 1000;
$z = 1.05;
$x = floor($y / $z);
echo "税抜き価格:$x 円";
?>

【floor】は切捨ての関数なので切り捨てられた数値が表示され、【floor】の箇所を【ceilr】、【roundr】と変えてやれば切り上げ、四捨五入された数字が表示される

だが、上記計算式を動かしてみた結果変な数値が返ってきた
しばらく問答したのち、価格にカンマが入っていたのが原因ぽい
このカンマを外して計算すれば正しい値が返ってくるのだが、今度は表示されている価格にカンマが入ってない状態に。。。

やはり価格にはカンマは不可欠なのでこれまた php で千位毎の区切りにカンマを入れてしまえと

<?php
$number = 1234.56;
$english_format_number = number_format($number);
?>

使用する関数は【number_format】
パラメータが 1 つだけ渡された場合、 number は千位毎にカンマ (“,”) が追加され、 小数なしでフォーマットされますとのこと

これを組み合わせれば

<?php
$y = 1000;
$z = 1.05;
$number = floor($y / $z);
echo $english_format_number = number_format($number);
?>

これでうちの利用しているサーバー上では税抜き価格が表示可能になった

参考にしたサイト

プルダウンメニューで表示を切り替えるJavaScript

プルダウンメニューで表示を切り替えるJavaScript

ECサイトなどで商品のサイズごとに表記を変えたり、画像を変更したり、リンクを変更したりするのに使えるスクリプト

※当方スクリプトに関しては若葉マークなので、動くかどうか程度の検証しかしていないのであしからず

まず最初に、表示させる項目の変数名と下記で設定する配列の何番目の値かを設定あする

var fName=0;		//項目名、プルダウンメニューの項目
var fImage=1;		//画像ファイル名
var fText=2;		//テキスト名
var itemsID=3;		//商品ID
var InTaxPrice=5;	//税込み価格
var NoTaxprice=6;	//税抜き価格

次に、表示させる値を上記で設定した変数の配列通りに記述

var fData=[
['バリエーション名称1','0001.jpg','これはバリエーション1です。','0000000001','1,050','1,000'],
['バリエーション名称2','0002.jpg','これはバリエーション2です。','0000000002','1,050','1,000'],
['バリエーション名称3','0003.jpg','これはバリエーション3です。','0000000003','1,050','1,000'],
['バリエーション名称4','0004.jpg','これはバリエーション4です。','0000000004','1,050','1,000'],
['バリエーション名称5','0005.jpg','これはバリエーション5です。','0000000005','1,050','1,000']
];

これで基本設定は完了
次は表示箇所の各設定

//リストメニューの各プション名設定
function genOption(){
var ret='';
for(var i in fData) ret+='<OPTION value="'+i+'">'+fData[i][fName]+'</OPTION>';
return ret;
}
function chData(id){
//名称表示
document.getElementById('div_name').innerHTML=fData[id][fName];
//商品画像
document.getElementById('div_images').innerHTML='<img src="'+fData[id][fImage]+'" alt="'+fData[id][fName]+'" />';
//商品テキスト
document.getElementById('div_text').innerHTML=fData[id][fText];
//商品価格
document.getElementById('price').innerHTML='<p>'+fData[id][InTaxPrice]+'円(税抜:'+fData[id][NoTaxprice]+'円)</p>';
}

プルダウンメニューを表示させたい箇所へ下記コードを挿入

<SELECT onchange="chData(this.value);">
<SCRIPT>document.write(genOption());</SCRIPT>
</select>

先ほど設定した表示切替部分のコードを表示させたい箇所へ各々挿入

<div id="div_name"></div>
<div id="items_images"></div>
<div id="div_text"></div>
<div id="price"></div>

以上で完了

ただ非常に設定するのが面倒なのでもう少しシステマチックに簡略化できないものだろうか。。。
wordpressをECとして使用する際にはカスタムフィールドとの併用でクリアはできたけれど、やはり商品登録がものすごく手間がかかる

JavaScript で画像をランダムに表示させる

PHP で表示さられない場合などは JavaScript を使ってランダムに画像を切り替えられる

url = new Array(); //ジャンプ先のURL
img = new Array(); //表示画像
url[0] = "http://www.kzk-design.jp/scribble/browser/";
url[1] = "http://www.kzk-design.jp/scribble/htmlcss/";
url[2] = "http://www.kzk-design.jp/scribble/javascript/";
url[3] = "http://www.kzk-design.jp/scribble/movabletype/";
url[4] = "http://www.kzk-design.jp/scribble/wordpress/";
url[5] = "http://www.kzk-design.jp/scribble/etc/";
img[0] = "img_browser.jpg";
img[1] = "img_htmlcss.jpg";
img[2] = "img_javascript.jpg";
img[3] = "img_movabletype.jpg";
img[4] = "img_wordpress.jpg";
img[5] = "img_etc.jpg";
n = Math.floor(Math.random()*url.length);
document.write("<a href='"+url[n]+"'>");
document.write("<img src='"+img[n]+"' />");
document.write("</a>");

リンクはさせず画像のみの場合は【url】変数の部分を削除し、【Math.random()*img.length】として【document.write】の部分を調整してやればよい

PHP でランダムに画像の表示切替

乱数 PHP でランダムに画像を切り替える

<?php
$random_banner[] = "<a href=\"#\"><img src=\"banner_01.gif\" alt=\"画像1\" /></a>";
$random_banner[] = "<a href=\"#\"><img src=\"banner_02.gif\" alt=\"画像2\" /></a>";
srand(microtime()*1000000);
$random_rand = rand(1, $n = count($random_banner));
$random_rand -= 1;
echo "$random_banner[$random_rand]\n";
?>

$random_banner と $random_rand は変数なので任意に変更可
ランダムに表示したい画像を増やしたければ【$random_banner[] = "<a href=\"#\"><img src=\"banner_02.gif\" alt=\"画像2\" /></a>";】の記述を増やせばいいだけ

rand(a,b) は乱数を返す関数。
rand 関数の記述の前に乱数を初期化する関数 srand() を最初に呼び出す
microtime() は秒数のマイクロ秒以下、これを1000000倍したもので乱数を初期化する

いちおこれで自分の環境では動作した

記事一覧指定件数をDIVで区切る & 1件ごとにスタイルを変更

記事リストを指定した件数を DIV で区切る方法と、ストライプリストのように1件ごと交互にスタイルを変更する方法

これを利用すると結構デザインの幅が増えるので助かる
ストライプリストを作る場合、MTだと簡単なんだけれどWPは方法を探すのに苦労した。。。

<?php if (have_posts()) : ?>
<?php $post_count = 1;//カウンターの初期化
echo '<div class="list-box">' . "\n";
?>
<?php while (have_posts()) : the_post(); ?>
<?php if ( $post_count % 5 == 1 && $post_count != 1 ) { echo '</div>' . "\n" . '<div class="list-box">' . "\n"; } //5で割った余りが1で、なおかつカウンターが1で無い場合echoの内容を出力
?>
<?php
$class = ($post_count % 2) ? 'odd' : 'even';//カウントが2で割れればodd、割れなければeven
echo "<li class=\"$class\">"//上記で得た値をクラスへ代入
?>
<a href="<?php the_permalink() ?>"><?php the_title(); ?></a>
</li>
<?php $post_count++; //カウンターを1増やす ?>
<?php endwhile; ?>
<?php echo '</div>' . "\n"; ?>
<?php else : ?>
<p>記事が登録されていません。</p>
<?php endif; ?>

ちなみにMTでストラプリストを作る場合は下記から

MTで指定した件数を区切る方法はまだ探してないがあるのかな

エントリーページに対応した携帯用 QR コードの自動生成

Google のAPI【Google Chart】を利用する

QR コードを出力したい箇所へ下記をソースに挿入

<img src="http://chart.apis.google.com/chart?chs=120x120&choe=Shift_JIS&cht=qr&chl=【携帯用URL】">

画像のサイズや文字コードなどなど、若干設定が可能

  • chs ・・・ 画像のサイズ指定
  • cht ・・・ qrを指定
  • chl ・・・ URLを指定
  • choe ・・・ 文字コード指定(携帯端末ではUTF-8では文字化けする可能性有なのでShift-JIS指定)

wordpressのテンプレート内での記述は、携帯ページ用プラグイン【Ktai Style】を利用する場合、URLはPCページと同じなので普通にページのURLタグを挿入すれば良い

<img src="http://chart.apis.google.com/chart?chs=120x120&choe=Shift_JIS&cht=qr&chl=<?php the_permalink(); ?>">

でいけるはず

記事の本文の表示文字数を指定する方法

wp で記事の本文を呼び出す場合には【the_content()】を使う
しかしこれだと記事全部を呼び出してしまうのでの【the_content()】変わりに【$post->post_content】を使うことでカスタマイズ可能に

<?php echo mb_substr($post->post_content, 『文字の開始位置』, 『文字の終了位置』); ?>

substr 関数で【$post->post_content】を『文字の開始位置』から『文字の終了位置』でトリムする。あたまの「mb_」は文字化け防止

たとえば、本文の文字数を 100 文字で制限を掛けたい場合には

<?php echo mb_substr($post->post_content, 0, 100); ?>

と指定するだけ

タイトルなんかも同じ原理でいけばトリミングできるのかな

[2010/2/10] 追記:タイトルのトリミング方法

<?php
$title= mb_substr($post->post_title,0,20);
echo '<h1>'.$title.'...</h1>';
?>

これだと 20 文字のみトリミングし、末尾に三点リーダを表示させる

その他、記事の投稿スラッグを表示したい場合には【$post->post_name】、記事IDを取得したい場合は【$post->ID】を利用すれば各々のトリミングも可能

MovableType でいうところの lastn=”N” offset=”M” をWordPressで

wordpress でサイトを構築する際に何の疑問もなしに MT でいうところの lastn=”N” offset=”M” の仕様を想定した構想を練ってしまっていてふと気付いた、Wordpressで同じような機能ってあるのか?

結構調べるのに時間がかかってしまった、調べ方が悪かったのかな。。。
エントリーの記述タグをまだ把握しきれていないから検索して調べるにしても適切なキーワードで探せなかったんだろう

んで調べた結果 MT でも WP でもオフセット引数は変わらず仕様でき、取得投稿の先頭からスキップする投稿数を指定できるらしい
ただ、 lastn にあたる部分は2通りあって get_posts を使うか query_posts を使うかで変わってくる、それぞれのタグには違いがあるらしいのですが完全には理解できてないので詳しくは下記を参照

どうやら get_posts を使用した際カスタムフィールドの値が取得できないような記述を見かけたので今回は query_posts を使うことにした

<div>
<?php $posts = get_posts('numberposts=1&offset=0&category=4'); foreach($posts as $post) : setup_postdata($post); ?>
<h3><a href="<?php the_permalink() ?>"><span><?php the_title(); ?></span></a></h3>
<p class="post_body"><?php the_content(); ?></p>
<p class="post_date"><?php the_time('Y.n.j') ?></p>
<?php endforeach; ?>
</div>

いまいち WP の記述方法が理解できてないから不安だが一応希望通りの動作はしたので良しとしますかな
構築を進めていく中で変な挙動とかしないことを祈る。。。

ヘッダ内 Meta データから WordPress のバージョンを削除する

バージョンの記述を削除しようと思い、テーマ内を探してみてもそれらしい記述が見つからない
雰囲気的に wp_head() が怪しいような気がしたけれど functions.php 内にもとくに記述がないのでギブアップ
google さんに助けを求めたらすぐに見つかった

どうやらテンプレートタグ wp_head() を挿入すると自動的にヘッダー内へ meta タグの記述がされてしまうらしい
そして functions.php 内へ下記の記述を加えてあげれば WordPress のバージョン情報は非表示になる

//WP generator Non-display
remove_action('wp_head', 'wp_generator');

バージョン情報の meta タグの他に wlwmanifest とEditURI のリンク情報が含まれてしまう
この記述もいらないのでついでに削除してしまえ

バージョン情報同様下記記述を functions.php 内へ記述するだけで完了

//WP wlwmanifest Non-display
remove_action('wp_head', 'wlwmanifest_link');
//WP rsd Non-display
remove_action('wp_head', 'rsd_link');

MT4でストライプリストの作り方

特にプラグインなどを導入しなくても CSS レベルでの導入が可能かのが良いね
まぁ MT4 以下では JS を利用しないとダメみたいだけど。。。

原理は結構簡単
特殊変数を利用して条件分岐をリストに使われている <li> タグに加えるだけでいい

<li class="<MTIf name="__odd__">odd<MTElse>even</MTElse></MTIf>"></li>

これで偶数なら [odd] 、奇数なら [even] となってくれる
あとは CSS で

li.odd {
background-color: #FFFFFF;;
}
li.even {
background-color: #CCCCCC;
}

などとしてやれば交互に背景色が変わるリストの完成

FLASHの背景を透明に表示する

ホント無知ですね、これも最近やっと知ったw
そんな必要にせまられなかったしなぁ。。。

てかぶっちゃけ背景が透明じゃなくてもそんなに困らないわけで…

上記のサイトで設定方法が書いてある
どうやら方法は2パターンあって書き出すときに設定してしまう場合と HTML のソースに付け加える場合
どっちでも変わらないのかな?

透過 PNG と一緒でデザインする際に非常に利便性があるわコレ

Home

Search
Feeds
Meta

Return to page top