iosでcssでhover処理を入れていたaタグがクリック出来ない

タイトルの通り、hover処理を入れているaタグがiPhoneでクリックできなくなってた。
原因がわからなかったので対症療法でしか対応できなかった。

以下対応方法です。
クリックイベントが起きなくなってしまっていたので、touchstartでaタグのhrefを取って、ページを移動させてます。

$('a').on 'touchstart', ->
 location.href = this.getAttribute('href')

hover時にdisplay:blockしているaタグ要素の中身を表示させたりしているので、それが絡んでるんだと思います。
同じような状況になって、解決出来たって人いたら教えてください。

[WordPress] functions.phpに入れていたら少し楽になる関数

WordPressでimgタグを書くのが面倒

<img alt="sample" height="100" src="<?php echo 'TEMPLATE_DIR' . '/sample.jpg' ?>" width="100" />

functions.phpに下を追加

define('DIR', get_bloginfo( 'template_directory' ));
/* imgタグを返す */
function img_tag($file, $alt = '', $opt = array()){
  //ディレクトリ名は自分の環境に合わせて
        $path = DIR . '/images/' . $file;
        if(!empty($alt)){
                $opt['alt'] = $alt;
        }
        $etc = '';
        foreach($opt as $key => $value){
    //引数のデータをそのまま属性に追加している。
    //必要だったら値のチェックをしましょう
                $etc .= ' ' . $key . '="' . $value . '" ';
        }

        $path = sprintf('',
                $path,
                $etc
        );

        echo $path;
}

使い方

<?php
img_tag ('sample.jpg', 'alt属性', array('width' =>100, 'height' => 100)) ?>
//省略も可
//<img class="php" code="" src="テンプレまでのパス/images/sample.jpg'>

少しだけimgタグを書くのが楽になると思うんだけどどうだろう？ cssを追加するのも少しだけ楽になる↓ 配列で渡せるようにしてもいいかも

function css_tag($file){
    echo sprintf('',
            DIR . '/stylesheets/' . $file
    );
}

まあ、他のフレームワークのパクリなんだけどね

[WordPress] ウィジェットが登録されているサイドバーの種類を取得する

WordPressはサイドバーやウィジェットを使うとかなり自由にコンテンツを配置できる。
その際に、例えば左側のサイドバーと右側のサイドバーの幅が違っていて、アイキャッチ画像やcssの指定をそれぞれに合わせたいなんて時がある。

その場合は…function.phpにウィジェットの処理を書く箇所で取得可能。

function widget($args, $instance) {
 //$argsという変数にサイドバーのIDやらの情報が入っている
 var_dump($args);

 //色々処理
 if(isset($args['id']) && $args['id'] === 'left-sidebar'){
  //サイドバーの種類に合わせてなにか処理を変える
 }
}

[WordPress] Viper's Video QuicktagsでYoutubeの動画が出なくなった場合の対応

Youtubeの埋め込み用コードが変更になったみたい。
http://www.youtube.com/watch?v=*****
が
http://youtu.be/******
になった

youtu.beってドメイン。

この新しいURLにWordPressのプラグインの「Viper's Video Quicktags」っていうYoutubeを貼り付けるクイックタグを作ってくれるプラグインが対応してなくて、エラーが出た。

プラグインのファイルをちょっと変更して対応した。
(プラグインのバージョンは2011/12/13で最新の6.3.3)

■変更するファイル
/wp-content/plugins/vipers-video-quicktags/vipers-video-quicktags.php

■変更する箇所
2866行目

// Playlist URL ( http://www.youtube.com/playlist?list=PLXXXXX )
if ( false !== stristr( $content, 'playlist' ) ) {
 //省略
}
// Legacy playlists ( http://www.youtube.com/view_play_list?p=XXX )
elseif ( FALSE !== stristr( $content, 'view_play_list' ) ) {
 //省略
}
//ココから追加箇所
elseif ( FALSE !== stristr( $content, 'youtu.be' ) ) {
 preg_match( '#http://(www.youtu|youtu|[A-Za-z]{2}.youtu)\.be/([\w-]+)(.*?)#i', $content, $matches );
 
 if ( empty($matches) || empty($matches[2]) ) return $this->error( sprintf( __('Unable to parse URL, check for correct %s format', 'vipers-video-quicktags'), __('YouTube') ) );
 
 $embedpath = 'v/' . $matches[2];
 $fallbacklink = 'http://www.youtube.com/watch?v=' . $matches[2];
 $fallbackcontent = '';
}
//ココまで追加
// Normal video URL
else {
 //省略
}

Normal video URLってコメントを目印にして探して。

もし変更するなら、変更前の元のファイルをコピーしといて、すぐ戻せる状態にしてから試したほうがいいと思う。

[WordPress] 一覧ページで前後のページへのリンクを出す

記事の一覧ページなんかで、「次のページ」とか、「古い記事へ」とかのリンクを出したい。
ブログなんかには当然のあるやつ。
next_posts_linkとprevious_posts_linkを使う

previous_posts_link('<<新しい記事を見る');
next_posts_link('古い記事を見る>>');

[WordPress] カスタム投稿タイプの一覧ページが表示されない

カスタム投稿タイプ別の一覧ページは
http://example.com/カスタム投稿タイプ名
でその投稿の一覧が表示されるんだけど、なぜかある投稿タイプの時だけ404になった。

結局理由はわからないまま…
今回はhas_archiveをtrueにすることで解決できた。

has_archiveをtrueにすると
archive-{post_type}.php
archive.php
index.php
の順にファイルを読みにいく。

構成によってはこのやり方だと対応できないかも


参考：
カスタム投稿タイプのメインインデックス（WP 3.1～）

[WordPress] カスタム投稿タイプ別にカスタムフィールドを使い分ける

WordPressでサイトを構築して、更新を人に任せる場合は、入力項目の管理なんかが難しくなりますね。
カスタム投稿タイプができて、投稿ごとにカテゴリーを選んでもらうという作業が亡くなった分楽にはなったんですが、カスタムフィールドを使おうとすると、更新する人によってはハードルが高いこともあります。

投稿タイプごとに、表示するカスタムフィールドを切り分けることができれば、とりあえず、出ている項目に必要なデータをいれて投稿すればOKって感じにできそうです。

Custom Field GUI Utility 3 - WordPress プラグイン

昔からずいぶんお世話になってるプラグインです。
投稿タイプってのができたことに対応して、投稿タイプごとにカスタムフィールドの表示・非表示を切り分ける機能がついたらしい。

ありがたや、ありがたや。

[WordPress] ファイル名を指定して、画像パスを取得する

WorePressにはアイキャッチ画像って便利な機能あるけど、1枚しか設定できないから、物足りないときがある。
各記事に、決まったタイプの画像を複数掲載する場合など…
例：メイン画像とサブ画像とタイトル画像を記事に使ってるとか
メイン画像をアイキャッチに登録した場合、他2つはどうするか？
カスタムフィールドに登録してもいいけど、その場合はサイズを指定して取得したりするのが難しくなる(っぽい。)

なんでその記事に登録されている画像からファイル名を使ってパスを取得する方法を考えた



function getImgByName($post_id, $name, $size = 'thumbnail'){

  //その記事に登録されている画像を全部取得
  $files = get_children('post_parent=' . $post_id . "&post_type=attachment&post_mime_type=image");

  foreach($files as $key => $file){

    //ファイル名だけ取り出す
    $path = explode("/",$file->guid);
    $path = end($path);

    //ファイル名取得する関数あったね
    $filename = basename($file->guid);

//ファイル名を調べて、指定したものだったらそのimgタグを返す
    if($name === $filename){
      return wp_get_attachment_image($key, $size);
    }
  }
  return false;
}

function.phpに追加すれば、テンプレでは
<?php echo getImgByName($post->ID, 'title.png'); ?>
みたいに使える

[WordPress]抜粋があるかどうか判定する

WordPressで抜粋を記入している場合とそうでない場合で表示方法を変更したい場合は
has_excerpt()
で判定できる。

postIDを指定したい場合は引数にidを渡せばOK

has_excerpt($id)

[WordPress]カテゴリー取得方法

WordPressでカテゴリーを取得する方法のまとめ

■現在表示中の記事・アーカイブのカテゴリーを取得したい

・get_the_category()

記事のカテゴリー名、ID、 スラッグなどをphpの配列で返してくれる
現在表示中の記事やアーカイブのカテゴリーを返してくれるのだけど、$postが変更されていると、予期せぬ値が返ってくることも。

■全部のカテゴリーIDを取得したい

・get all category ids()

カテゴリーのIDが配列で返ってくる

■カテゴリーIDで取得したい

・get category(カテゴリーID)

カテゴリーIDを指定して、配列を取得する
カテゴリーのオブジェクトを引数に渡すこともできる

■スラッグで調べる

・get_category_by_slug('name')

カテゴリーのスラッグで調べてphpの配列で返してくれる

■親カテゴリーを取得する

・get category parents(カテゴリーID)

親カテゴリーを返す
IDを指定すると、指定されたカテゴリーの親カテゴリーを返す。
何も指定しない場合は現在表示中のカテゴリー・記事のカテゴリーを返す

WordPressにflckrの画像をランダムに表示する。

WordPress内にflckrの画像を表示するには
俺はflickrRSSというプラグインを使ってます。
管理画面で「プラグイン」→「新規追加」→「flickrRSS」で検索すると出てきます。

これがRSSというだけあって、新しい順で画像を表示するんだけど、デフォルトではコレを変更できない。
なので、プラグインのファイルをちょこっと改造します。
flickrRSSのバージョンは5.1です。

■改造
・プラグインフォルダの中にある「flickrrss.php」ってファイルを開く。

・141行目に
$items = array_slice($rss->items, 0, $settings['num_items']);
ってコードがあります。
見つからない場合は、「array_slice」でファイル内を検索すると出てくると思う。
バージョン5.1ではarray_sliceは1箇所でしか使われてないけど、他のバージョンではどうなのかわからないので、注意して試してください。

このコードの意味は「$rss->items」っていう全画像データの0番目から$settings['num_items']番目までを抜き出すってことです。
$settings['num_items']ってのは管理画面から設定した表示枚数ね。

「$rss->items」ってのが画像のデータなんだけど、デフォルトではこれが新しい順に並んでる。
なので、これをランダムにしてしまいましょう。

shuffle($rss->items);

これだけ。
これを上に書いた141行目のコードの前に入れるだけ。

これでランダムになります。

プラグインの使い方なんかはこんなページを参考にどうぞ
WordPressにFlickrを読み込めるプラグイン「FlickrRSS」

iPhone対応用にサイトの幅を設定する

スマートフォン用に幅を設定するには<head>内にmetaタグを追加する

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

contentの中身は

■width=***
ここで表示する横幅を指定する。
ここには数字を入れてpx幅を指定することもできるらしい。
機種によって幅が違ったり、端末を横にすると幅が変わったりしてもそれに合わせて表示したい場合は"device-width"と入れると、各端末の幅に合わせてくれる

■initial-scale=*
初期表示の倍率。1で通常表示。2にすると2倍。

■maximum-scale=*
拡大可能な倍率。画面を拡大する場合の最大の拡大率を設定する。

他にも
■user-scalable
ユーザーが拡大・縮小できるかどうか。yes/noで設定する。

■height
高さ設定。device-heightで端末の高さに合わせられる

■minimum-scale
縮小した場合の最小の倍率の設定

ちなみにWordPressでiPhoneで見た場合は、iPhone用のテンプレートに切り替えて表示したいって場合は「iphone theme switcher」ってプラグインがある。
詳しく説明してくれている方がおります。
iPhoneからアクセスした時のテーマを指定できるWordPressプラグイン「iPhone theme switcher」

iPhoneに限らず、いろんなブラウザや端末しだいで、それぞれテンプレを変更するためのプラグインもあったと思うけど、思い出せなかった。思い出せたら追記しよう。


参考サイト
iPhone 3G用のWebページを作る[AllAbout]
作って学ぶスマートフォン対応サイトの基本

WordPress 一覧表示カスタム

■月別表示
基本
wp_get_archives();
2011年4月

後ろに件数出したい
wp_get_archives('show_post_count=true');
2011年4月(1)

詳細→テンプレートタグ/wp get archives

WordPressでユーザー情報を取得する

the_author :: 記事の投稿者名を表示する

get_the_author :: 投稿者の名前を返す


投稿者のいろんなデータを取りたい時はこっち↓
the_author_meta
the_author_meta('nickname') : ニックネーム
the_author_meta('description') :ユーザーの説明文
って感じで使うよ。
 

wp_list_authors :: 著者の一覧を表示。ユーザーが投稿していれば、著者名が投稿へのリンクとして表示される