WEBCreate practice!! » PHP http://study.guidebook.jp/web_create Just another WordPress site Wed, 22 May 2013 02:26:09 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 WordPressでquery_posts()を使用して取得したデータを初期化する方法 http://study.guidebook.jp/web_create/?p=429 http://study.guidebook.jp/web_create/?p=429#comments Wed, 22 May 2013 02:24:32 +0000 masayoshi http://study.guidebook.jp/web_create/?p=429 前回の記事でワードプレスの繰り返しの基本、繰り返しに使用する記事の総数をquery_posts()を使って限定する方法をお伝えしましたが、今回は「wp_reset_query()」を使って取得したデータを一旦リセットする方法をお伝えします。

 

例えばこのWEBCreate PRACTICE!!の様にTOPページ以外にもお知らせが出ている様なサイトでは非常に助かる関数となります。具体的にはquery_posts()を使って記事のタイトルを何件か繰り返した後に一件の記事の全文を表示させたい時に使って頂くとかなり便利というやつです。

 

WEBCreate PRACTICE!!を例にとってソースを観て行きます。

 

News-feed部分の繰り返しの記述

 

wp_2_01

<ul id="news" class="ticker">
 <?php if (query_posts('showposts=4')) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink(); ?>"><?php the_date(); ?><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 <?php endif; ?>
</ul>

ここまでは前回の復習みたいな感じですが、「WEBCreate PRACTICE!!」の場合このままでは問題が発生します。「WEBCreate PRACTICE!!」はTOPページにも単一の投稿にもこのソースを使用しています。なにが起きるかというと単一の記事を表示すると、4件分の記事をすべて表示してしまうんですね。ここで登場するのが「wp_reset_query()」です。

 

wp_reset_query()を使ってquery_posts()を初期化する

 

使い方は非常に簡単です。query_posts()をリセットしたい場所にこの記述をするだけです。

<ul id="news">
 <?php if (query_posts('showposts=4')) : ?>
 <?php while (have_posts()) : the_post(); ?>
 <li><a href="<?php the_permalink(); ?>"><?php the_date(); ?><?php the_title(); ?></a></li>
 <?php endwhile; ?>
 <?php endif; ?>
 <?php wp_reset_query(); ?>
</ul>

これでこのあと記事の本文を表示してもquery_posts()の内容は影響しません。
 

]]> http://study.guidebook.jp/web_create/?feed=rss2&p=429 0 WordPressで記事の繰り返しの件数を指定する!! http://study.guidebook.jp/web_create/?p=411 http://study.guidebook.jp/web_create/?p=411#comments Fri, 17 May 2013 00:59:00 +0000 masayoshi http://study.guidebook.jp/web_create/?p=411 いやもーほんとに、WordPressやるのなら誰でも知ってる基礎中の基礎なんですけど、例えばTOPページにお知らせの項目があって記事のタイトルを最新記事から3件だけ表示させたいとか、そんな場面で使えるロジックを今回はご紹介です。
 
それじゃあまず最終的には↓↓みたいな感じで記事を投稿したら新しい記事のタイトルが先頭に来て・・・というのを仕上がり目標にしましょう。
 
wp_1_01
 
それじゃあ、ここでWordPressの記事の繰り返しの基本です。
 

WPの記事繰り返しの基本形

 

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    /*ここに書かれた内容が記事の数だけ繰り返し*/
  <?php endwhile; ?><?php else : ?>
    /*繰り返す記事が無い場合ここに書かれた内容が表示される*/
<?php endif; ?>

 
この記述がWPの繰り返しの基本構文です。じゃあ、実際に投稿記事のタイトルが表示されるように記述を追加します。
 

投稿記事のタイトルが繰り返される様に記述を追加

 

<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php endwhile; ?><?php else : ?>
    <div>残念ながら記事が見つかりません。</div>
<?php endif; ?>

 
the_permalink()はタイトルに対応する詳細記事のURLを取得する関数で、the_title()は記事のタイトルを取得する関数になります。
 
実際に編集しながらやっている方はお分かりだと思うんですが、この書き方だと記事の数だけ繰り返し＝全記事のタイトルとなってしまい。全ての投稿記事のタイトルが出てきちゃいます。そこで登場するのがquery_posts()関数です。これを使用すると最新記事から何件だけなどの条件を付けることが可能となります。じゃあ実際に最新3件しか表示されない様に変更しましょう。
 

<?php query_posts('showposts=3'); ?>
<?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post();?>
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <?php endwhile; ?><?php else : ?>
    <div>残念ながら記事が見つかりません。</div>
<?php endif; ?>

 
このように記述をすれば最新3件のみのタイトルが表示されるようになります。ちなみにquery_posts(‘showposts=○’)の○の中の数字が取り出したい記事の件数になります。
 

]]> http://study.guidebook.jp/web_create/?feed=rss2&p=411 0 PHPを使ってクロスブラウザ+デバイス http://study.guidebook.jp/web_create/?p=67 http://study.guidebook.jp/web_create/?p=67#comments Sat, 27 Apr 2013 04:00:19 +0000 masayoshi http://study.guidebook.jp/web_create/?p=67 メディアクエリを使ってデバイスの幅でCSSを切り替えるレスポンシブデザイン。素敵ですよね・・・。僕もリキッドレイアウトでサイトを作ってみたいなと思うものの、なかなか時間が取れず取り組めてないです。今回はそんなレスポンシブデザインとは違う、昔ながらのPHPでユーザーエージェント情報を取得してクロスブラウザなりデバイスを実現する手法をご紹介しようと思います。
 
まずは肝心なユーザーエージェント情報ですがこちらのページをご覧になってください。ページの上部に、
 
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.64 Safari/537.31
（※上記はウインドウズのPCかつクロームで閲覧した場合です）
 
という文字列が出てくると思います。もちろん見る人の環境によって文字列の中身は変わります。これがユーザーエージェント情報です。この文字列の中身をPHPで判別して行くわけです。では早速ユーザー情報を取得してみましょう。

<?php
echo getenv("HTTP_USER_AGENT");
?>

または

<?php
echo $_SERVER['HTTP_USER_AGENT'];
?>

この記述をPHPファイルの<body>の中に記述してください。そして、サーバーにUPして確認をしていただくと先ほどのようなユーザーエージェント情報が出てくると思います。
ちなみに、書き方は違いますがjavaScriptでもユーザーエージェント情報は取得できます。ただ、このままの状態では単に情報を表示させているだけなので今回はPCサイトを
 
PCで閲覧→PCサイトを表示
スマホで閲覧→スマホサイトを表示
 
という振り分けをしていこうと思います。今回はgetenv()を使用します。PCサイトのindex.phpに下記の記述を加えてください。
(※ここ以下のPHPの記述はHTMLのソースコードより必ず上に記述してください。先ほどの<body>の中の記述は消していただいて大丈夫です。)
 

PCサイトにスマホでアクセスしたらスマホサイトに飛ばす

<?php
$agent = getenv("HTTP_USER_AGENT");
if (mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent)) {
  header('Location: スマホサイトへのファイルのパス');
  exit();
}
?>

上記のコードの「スマホサイトへのファイルのパス」の部分を書き換えてください。ちなみに絶対パスでも相対パスでもどちらでも構わないです。
では今度は逆にスマホサイトにPCでアクセスしてきたらPCサイトを表示するようにしていきます。スマホサイトのindex.phpに下記の記述を追加してください。
(※ここ以下のPHPの記述も必ずHTMLのソースコードより上に記述してください。)
 

スマホサイトにPCでアクセスしたらPCサイトに飛ばす

<?php
$agent = getenv("HTTP_USER_AGENT");
if (!(mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent))) {
  header('Location: PCサイトへのファイルのパス');
  exit();
}
?>

上記のコードもPCサイトと同じようにパスを自分の環境に合わせて書き換えてください。
最後に赤文字で何回もHTMLのコードより上に書いてくださいと言っている理由と「HTMLより上に書く」のサンプルコードを書いておきます。
 
今回のPHPの記述はheader()というPHPの関数を使用しています。この関数は強制的に別ページにユーザーを飛ばす力を持っています。HTMLのコードが上から順番にブラウザに読まれるのと同じようにPHPのコードも上から順番に読まれます。
今回の記述はユーザーエージェント情報に「iphone」「ipad」「Android」という文字列が入っていたらスマホサイトまで飛ばしているわけです。要するにHTMLのコードが読まれる前にPHPの記述が読まれなければいけない訳です。

ではサンプルを最後に・・・。

<?php
$agent = getenv("HTTP_USER_AGENT");
if (!(mb_ereg("iPhone", $agent) or mb_ereg("iPad", $agent) or mb_ereg("Android", $agent))) {
  header('Location: PCサイトへのファイルのパス');
  exit();
}
?>
<!DOCTYPE HTML>
<html lang="ja">
<head>
~以下略~
]]> http://study.guidebook.jp/web_create/?feed=rss2&p=67 0