「php」タグアーカイブ

wordpress – InstantWidget – 即席ウィジェット

class capWidget extends WP_Widget {
function capWidget() {
parent::WP_Widget(false, $name = 'hogehogename');
}

function widget() {
?>
<div id="hogeid" class="side-widget">
<p class="widget-title">hogehogename</p>
</div>
<?php
}
add_action('widgets_init', create_function('', 'return register_widget("capWidget");'));

ちょっとしたコードなどをウィジェットにしたい場合は良くある。

しかし、wordpress標準のテキストウィジェットではphpコードを使う事は出来ないし、プラグインで使えるようにした所で、それの動作でブログ自体に負荷がかかるのは避けたい(そも、このブログも三十個ちかくのプラグインが常時稼働している)。

そういうわけで、テーマ自体にコードを書き込むわけだが、ウィジェットにするにしても、機能が決まっている場合がほとんどなので、オプションすら必要ない場合が多い。

なのでこういった定型を持っておけばとても便利だ。

netbeansの余計な御世話である警告を解除

[browser-shot width=”450″ url=”https://ja.netbeans.org/”]

趣味プログラマーな私にとって、色々とヒントをくれるIDEは大助かりちゃんです。class? 何それ美味しいの。cakephpとかようわからんねん! フレームワークって何さ。

そんな私でも色々と作って楽しめてるのは全てIDEちゃんのおかげですよ。愛してる!

けれども、IDEって変な警告くれちゃいますね。

例えばこういうのですよ。同じ変数に上書きしてるわけですね。下線が出てきて警告してくれます。うん、ありがとう。でも分かってるんだ。けれど、分かった上でやってるんだ。ごめんね(普通のプログラマはちゃんと新たに変数を定義してるんですかね? こういう事もよくわからない初心者です。ええ)。

ちなみに今回はPHPの例ですよ!

さて、これを解除する設定方法ですが、「ツール>オプション」で出てくるウインドウの中にある「エディタ」内「ヒント」タブに色々とありますよ。

不変変数という項目がそれであります!

スッキリ!

他にも色々な項目がありますね。カスタムカスタム。

プログラム等のコードハイライトを「WP Code Prettify」に変更したよ!

チャオ! この挨拶に特に意味は無いよ。

wordpressでのブログ執筆はとても楽しいですよね。楽しいんですが、色々な種類の記事をごちゃまぜで書いてる私には困った事も多いんですよ。

 

wordpressでの記事作成では、完成記事に近いブレビューをみながら編集する「ビジュアル」と、htmlタグを直接いじいじしながらやる「テキスト」の二つの編集モードがありますよね。私はへっぽこ日曜プログラマーなので、両方使ってます。

で、本題のコードハイライトプラグインなのですが。これがもう大変なわけですよ。両方を行ったり来たりしてるとこのコードが変な変換をされてしっちゃかめっちゃか。最終的には文字化けみたいになっちゃったり崩れまくりだったわけです。

それで今回見つけたのが「WP Code Prettify」ですよ。ショートコードではなくpreタグによる記述なので、ビジュアルエディタとテキストエディタを行き来しても影響をありませんよ!わーい。

[browser-shot width=”450″ url=”http://wordpress.org/plugins/wp-code-prettify/”]

<?php if(function_exists('wp_pagenavi')): ?>
 <?php wp_pagenavi(); ?>
 <?php else : ?>
 <div class="navigation">
 <div class="alignleft"><?php previous_posts_link(__('Previous page')) ?></div>
 <div class="alignright"><?php next_posts_link(__('Next page')) ?></div>
 </div>
 <?php endif; ?>

ちなみにこんな感じです。うん、良い感じですね!

もしも今後、このプラグインを削除したとしてもpreタグでは残るので最低限の見た目も保証されます! 安心!!

php – amazon_assie – アマゾンAPI利用アフェリエイトコード

コード

amazon_assieにアクセスキー、シークレットアクセスキー、アソシエイトID、検索キーワードを入れると正方形にして中心に向かってズームインした形の画像リンク配列を返す。

PHP:アマゾンAPI (AWS)で検索結果を表示 その3 – アダルトを除く | マイヤーの開発ブログさんのコードを拝借。ありがとうございます。

動作は艦これ画像まとめたった~のサイドバーを確認のこと。

//RFC3986形式でURLエンコードする関数
function urlencode_rfc3986($str) {
  return str_replace('%7E', '~', rawurlencode($str));
}

function amazon_assie($access, $secret, $Tag, $ama_keywords) {
  $access_key_id     = $access;
  $secret_access_key = $secret;
  $AssociateTag      = $Tag;
  for($i = 1; $i <= 3; $i++) { //2ページ取得、ItemSearchの最大値は10まで
    $baseurl                  = 'http://ecs.amazonaws.jp/onca/xml';
    $params                   = array();
    $params['Service']        = 'AWSECommerceService';
    $params['AWSAccessKeyId'] = $access_key_id;
    $params['Version']        = '2011-08-01';
    $params['Operation']      = 'ItemSearch'; //商品名や著者名でキーワード検索
    $params['SearchIndex']    = 'All';
    $params['Keywords']       = $ama_keywords; //検索ワードを指定
    $params['AssociateTag']   = $AssociateTag;
    $params['ResponseGroup']  = 'Medium';
    $params['Condition']      = 'All'; //中古品も含める
    $params['ItemPage']       = $i; //何ページ目か
    //Timestamp パラメータを追加します
    //-時間の表記は ISO8601 形式、タイムゾーンは UTC(GMT)
    $params['Timestamp'] = gmdate('Y-m-dTH:i:sZ');
    //パラメータの順序を昇順に並び替えます
    ksort($params);
    //canonical string を作成します
    $canonical_string = '';
    foreach($params as $k => $v) {
      $canonical_string .= '&' . urlencode_rfc3986($k) . '=' . urlencode_rfc3986($v);
    }
    $canonical_string = substr($canonical_string, 1);
    //署名を作成します
    //-規定の文字列フォーマットを作成
    //-HMAC-SHA256を計算
    //-BASE64エンコード
    $parsed_url     = parse_url($baseurl);
    $string_to_sign = "GETn{$parsed_url['host']}n{$parsed_url['path']}n{$canonical_string}";
    $signature      = base64_encode(hash_hmac('sha256', $string_to_sign, $secret_access_key, true));
    //URLを作成します
    //-リクエストの末尾に署名を追加
    $url        = $baseurl . '?' . $canonical_string . '&Signature=' . urlencode_rfc3986($signature);
    $amazon_xml = simplexml_load_string(@file_get_contents($url));
    //  print_r($amazon_xml);
    foreach((object)$amazon_xml->Items->Item as $item_a => $item) {
      //アダルト対策
      $adult_dvd = $item->ItemAttributes->Format; //「アダルト」の文字
      $adult_toy = $item->ItemAttributes->IsAdultProduct; //アダルトなら「1」
      if(strpos($adult_dvd, 'アダルト') !== false) {
        continue;
      } elseif(strpos($adult_toy, '1') !== false) {
        continue;
      } elseif($item->LargeImage->URL == "") {
        continue;
      } else {
        $detail  = $item->DetailPageURL; //商品のURL
        $image_w = $item->LargeImage->Width; //画像の幅
        $image_h = $item->LargeImage->Height; //画像の高さ
        if($image_h > 250) {
          $image_h_p = $image_w / $image_h;
          $image_h_e = floor((($image_h_p * $image_h) - 250) / 2);
        }
        $image       = str_replace(".jpg", "._SX260_CR5,{$image_h_e},250,250_.jpg", $item->LargeImage->URL); //画像のURL
        $aferi_box[] = '<div class="amazonbox"><a href="' . $detail . '" target="_blank"><img src="' . $image . '" align="left" /></a></div><br />';
      }
    }

    //  print_r($aferi_box);";
    return $aferi_box;
  }
}

wordpressプラグイン「W3 Total Cache」を導入している人は管理者メニューが見えていないか確認しよう

WordPress › W3 Total Cache « WordPress Plugins
Easy Web Performance Optimization (WPO) using caching: browser, page, object, database, minify and c …

タイトルなが。

W3 Total Cacheはとても便利です。php処理の結果をキャッシュしそれを表示します。アクセスするたびに毎回処理をしていても無駄ですものね。ありがたい存在です。

しかし!! そのキャッシュの内容に、管理者である貴方用の表示が収納されている可能性があります! 具体的には、

 

こういうのです。

名称がよくわかりませんが「管理者メニュー」って感じですかね。この画面を表示してすぐに別デバイスで確認すると、管理者メニューが丸見えじゃないですか!!!

そこから中に入ろうとするとパスワード画面ではじかれるわけですが、あまり気持ちのいいものではありません。閲覧する人にとっても使い道のないリンクは邪魔なだけです。

管理者が閲覧したときはキャッシュを保存しないように設定しましょう。

ダッシュボード>Performance>Page Cache>Don’t cache pages for logged in users

 

これでログインしているユーザはキャッシュされなくなりました。安心!

wordpressでの投稿前にTRPGリプレイ文体をPHP処理で整形する

TRPGネクロカ「箱庭茶会 コンベンション」灰色卓リプレイpart0 – キャラ作成から始動 | aoringo works

リプレイのスタイルを少し変更し、名前を太字にしてみました。あとは改行されてもスペースを置かないように変更。一般的なリプレイ本と同じ文体ですね。

投稿する時にphp処理を挟む

文章を太字にするには「<b>」タグを利用します。つまり、リプレイの名前に全てこれを埋め込む必要があるのですね。執筆してる段階でそれらを入れていくのは疲れるものです。

グリーンマン:「”私”は構わないのだが。本当に案内せずともよいのかね?」
アン:「故郷を追われた時から覚悟を決めているわ。例え骨になろうともそれが私の運命。受け入れる覚悟は出来ている!」
グリーンマン:「そうか。残念だ。本当に、残念だ。骨になるなんて、そんなの、本当に、もったいない・・・」と笑みを称えて二人を見送ります。

これを、

<b>グリーンマン:</b>「”私”は構わないのだが。本当に案内せずともよいのかね?」

<b>アン:</b>「故郷を追われた時から覚悟を決めているわ。例え骨になろうともそれが私の運命。受け入れる覚悟は出来ている!」

<b>グリーンマン:</b>「そうか。残念だ。本当に、残念だ。骨になるなんて、そんなの、本当に、もったいない・・・」と笑みを称えて二人を見送ります。

こうしたいのです。wordpressでは、一度の改行で「<br>」、二度の改行で「<p>」としても処理されるので、改行を自動でつけるようにもしたいところ。

そういうわけで、ゴリゴリ書いていきますね。

投稿時に内容に処理を挟むには「content_save_pre」フィルター

名前の通り、内容を保存する前に働くフィルターです。

function replace_post_cont($text) {
  $text = preg_replace_callback('/(trpgreplay.*?>)(.*?)(?=</div>)/ius', "trpgreplay", $text);

  return $text;
}

add_filter('content_save_pre', 'replace_post_cont');

記事を保存するときに、「replace_post_cont」関数が働きます。「replace_post_cont」は記事を正規表現で整えるために用意しました。

「preg_replace_callback」は正規表現により抜き出した内容を、さらに関数を使って処理を挟むことができます。かなり便利です。

TRPGリプレイはdivタグの「trpgreplay」クラスを使用しているので、これを検索、中身を抜き出しています。

function trpgreplay($matches) {
  $text = preg_replace("/r/ius", "", "$matches[2]");
  $text = preg_replace("/n+/ius", "n", "$text");
  $text = preg_replace("/n(?!n)/iu", "nn", "$text");
  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");
  return $matches[1].$text;
}

そしてリプレイを整形しているのがこれです。「$matches」配列の[0]はマッチングした全体、[1]は$1にマッチングした部分、[2]は$2にマッチングした部分が収納されています。この場合、[1]には「trpgreplay”>」が、[2]には「リプレイの内容」が収納されています。

  $text = preg_replace("/r/ius", "", "$matches[2]");

内容のデータには「r」と「n」といった改行コードが混在している可能性があるので、「r」をまず全て消します。(正規表現じゃなくて普通の置換でよかったかも)

$text = preg_replace("/n+/ius", "n", "$text");

連続した改行を全て単発の改行に直します。これでエディタで執筆した内容の改行がゆらいでも大丈夫です。

  $text = preg_replace("/n(?!n)/iu", "nn", "$text");

単発の改行を二つの連続した改行に直します。一旦クリーニングして再度二度改行してるわけですね。

  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");

行の始めが「<」で始まらない場合は「:」までをbタグで囲むという処理です。ここをミスると「<b><b><b><b>」とひどいことになります。

最後にreturnで戻して完了。最終的な形は下記となります。

function trpgreplay($matches) {
  $text = preg_replace("/r/ius", "", "$matches[2]");
  $text = preg_replace("/n+/ius", "n", "$text");
  $text = preg_replace("/n(?!n)/iu", "nn", "$text");
  $text = preg_replace("/^(?!<)(.*?:)/ium", "<b>$1</b>", "$text");
  return $matches[1].$text;
}
function replace_post_cont($text) {
  $text = preg_replace_callback('/(trpgreplay.*?>)(.*?)(?=</div>)/ius', "trpgreplay", $text);
  return $text;
}

add_filter('content_save_pre', 'replace_post_cont');

完璧! 満足ちゃん。

php – ua_flag – スマートフォンでの処理を変える

スニペット

$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false)  && (strpos($ua, 'iPad') === false)&& (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
}

ユーザーエージェントを取得し、その内容によってその後の処理を変更する。

cssや画像の大きさなどを差別化する場合によく使う事になる

スマフォでのブログ表示が崩れていたので見ている端末によって表示を変えるようにしました

はじめに

ぴゃああああー!!

実は今まで、このブログの見た目になってから主にappleのスマート端末にて表示が崩れている問題を抱えていました。解決がめんど時間を中々見つけられず今まで放置しておりましたが、今回手を加えることにしました。

閲覧している端末を識別して処理を変える

どうやら問題はスライダーにあるようでした。pcでの閲覧には特に問題ないのですが、スマートフォンなどで閲覧すると、スライダー部分の黒が下まで伸びちゃうんですね。JavaScriptの処理周りで不具合があるようです。

そもそもスライダー自体が画像を多用する関係上、野外で使用するであろうスマートフォンでの閲覧には負荷が高めです。スライダー、無くしちゃいましょ。

ユーザーエージェントによってPCとスマートフォン(iPhone / Android)を振り分ける方法いろいろ(PHP / JavaScript / .htaccess等) | HTML5 – CSS3 mag

こちらのphpでの処理を参考に、「PC閲覧での表示の場合のみスライダーを表示」という形にしてみました。

  <?php
  if (is_front_page()) { //トップぺージだった場合
  $ua = $_SERVER['HTTP_USER_AGENT'];
  if ((strpos($ua, 'iPhone') === false) && (strpos($ua, 'iPod') === false) && (strpos($ua, 'Android') === false)) { //スマートフォンではなかった場合
  ?>

こういう感じです。

iphone、ipad、android、それぞれのユーザーエージェントでは無かった場合、PC用のスライダーを表示します。

お手軽ですね。

しっかりばっちり!!

記事横にスクロールでついてくる関連記事一覧を追加してみた

みんな大好きYARPP

記事の横に関連記事一覧を設置してみました。

YARPPというプラグインによる設置で、精度も高く、カスタマイズも簡単なのはとてもありがたいです。

WordPress › Yet Another Related Posts Plugin « WordPress Plugins

プラグインを設置して設定を見ると、

こんな感じで日本語なのも手伝ってとても分かりやすい。カスタマイズをしなくてもリスト表示、サムネイル表示ができてとても助かります。

ただ、やっぱりカスタマイズしたくなるのが人の性分でして、そういう人のためにテンプレートphpを出力してくれる機能まであります。痒いところに手が届きます。

テンプレートは複数種類あり、それを元に自分の好みに変更を加えることが出来ますよ。

テンプレートphpコード

<div id="YARPP-posts" class="side-widget">
  <p class="widget-title">関連記事</p>
  <?php if(have_posts()):
    $options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    //echo esc_url($thumbnails_default); デフォルトサムネイルさん
    //
    ?>
    <ul>
      <?php while(have_posts()) : the_post(); ?>
        <li>
          <p><a href="<?php the_permalink() ?>" rel="bookmark">
              <?php
              if(has_post_thumbnail()) { //サムネイルがあるかどうか探す
                the_post_thumbnail('yarppthumb');
              } else {
                echo '<img width="100" height="100" src="' . esc_url($thumbnails_default) . '" class="attachment-yarppthumb wp-post-image" alt="secondarytile" />';
              }
              ?>
              <?php the_title(); ?></a>
            <br><?php echo get_the_excerpt(); ?></p>
          <!-- (<?php the_score(); ?>)-->
        </li>
      <?php endwhile; ?>
    </ul>
  <?php else: ?>
    <p>No related posts.</p>
  <?php endif; ?>
</div>

これが今回記述したコードです。特に工夫したことは無い素直な感じの物。

サムネイルが設定されてればサムネイルを出力し、されてなかったらデフォルトサムネイルを出力します。

YARPPに設定されているデフォルト画像は

$options = array('thumbnails_heading', 'thumbnails_default', 'no_results');
    extract($this->parse_args($args, $options));
    if(empty($thumbnails_default))
      $thumbnails_default = get_header_image();
    echo esc_url($thumbnails_default); デフォルトサムネイルさん

で吐き出す事ができます。今後デフォルト画像は差し替えるかもしれないので、こうしていた方が取り回し楽ですよね。

cssはこんな感じです。

/*サイドウィジェット、関連記事*/
#YARPP-posts li{
  margin   :15px 0;
  height:90px;
  overflow:hidden;
}
#YARPP-posts li:after{
  content :".";
  color   :transparent;
  clear   :both;
}

#YARPP-posts img{
  border-radius :5px;
  width         :90px;
  height        :90px;
  float         :left;
  margin-right  :5px;
}
#YARPP-posts img:hover{
  opacity: 0.5;
}
#YARPP-posts li a{
  font-size:12px;
  font-weight:bold;
}

#YARPP-posts li  p{
  font-size  :10px;
  margin     :0;
  padding    :0;
  text-align :left;
}

画像を文字が回り込むような感じですかね。オーバーしそうだったら「overflow:hidden;」で非表示にします。

スクロールでついてくるようにしよう

あとはjqueryを使って、関連記事が追いかけてくるようにします。賛否両論だと思いますが、個人的にはこの仕様は好きです。

jQuery(function ($) {
            var nav = $('#YARPP-posts'), offset = nav.offset();
            $(window).scroll(function () {
              if ($(window).scrollTop() > offset.top - 20) {
                nav.addClass('fixed');
              } else {
                nav.removeClass('fixed');
              }
            });
          });

画面上部に関連記事の要素が来ると、cssクラス「fixed」を追加します。

cssファイルに以下を追加

.fixed{
  position :fixed;
  top      :20px;
}

ウインドウの絶対位置に要素を配置するのが「position :fixed;」ですね。「top :20px;」は表示位置となっています。

あとこの一連のjqueryコードとcssコードはwordpressテーマ「wsc7」に元々収録されています。元々はサイドバー全てがスクロールでついてくるのですけれど、関連記事だけ動くように変更してみました。

本当に痒いところに手が届く良いテーマだと思います。

WSC7