暖房つけても部屋が寒くて、暖房のパワーが桁違いな雪国の実家にちょっと帰りたくなっているyanagimachiです。今日は雪が降るみたいだし・・・(´･ω･｀) さて、WordPressでお知らせの一部を「トップにだけ表示させたくない！」みたいな要望があって、それのためのチェックボックスやラジオボタンを投稿にカスタムフィールドで追加することがあります。 件数指定があって絞り込む条件に追加しなければならないときはどうすればいいんだろう？と思っていたのですが、また必要になったので調べてみたら、簡単に書く方法がありました。 普通のコード $args = array( 'post_type' => 'post', //投稿 'posts_per_page' => 3 //3件表示 ) ) ); $post_list = get_posts( $args ); foreach ( $post_list

日中だいぶ暖かくなってきましたね。毎日とても眠いyanagimachiです。 お客さまがコーディングできる方たちでも、予約投稿などのためにWordPressを選択することがあるかと思います。 かといって投稿時に毎回一からコーディングをお願いするわけにもいきませんし、レイアウトが決まっているコンテンツでないと記事の複製では少し力不足、カスタムフィールドでは複雑にしなければならない・・・ということがあります。 そんなときはどうすればよいのでしょうか。 いろいろ調べてみたところ、HTMLをスニペットとして登録できるプラグインが見つかりました。 Post Snippetsでスニペットを登録して使ってみよう！ 1. スニペットを登録 ショートコードもボタンで挿入できるので、便利ですね！ ただし、変数名は1つだけしか使えないようです。 2. 投稿画面でPost Snippetsを選択 3. スニペット

どうもfujiharaです。ナツイですね～？ 神奈川の宇多田世代ならこの言葉知っていると思うんですが、いかがでしょうか？ 今回はWeb Storageと jQuery UIでサジェスト機能を実装していきます。 機能概要 機能の概要を説明します。ユーザが過去に入力した文字をフォームに入力した際に同じものをサジェストとして提供するようにします。 実装方法 まずサジェスト機能はjquery UIのサジェスト機能を使用します。 Autocomplete　こちらはサジェストするワードを配列で渡すだけでサジェスト機能を提供してくれる優れものです。 そして渡すワード配列を保存しておくのがWeb Storage になります。 処理内容は以下が考えられると思います。 ①ページ読込時に保存されてる検索ワード配列を読み込む。 ②読み込んだ検索ワード配列をAutocompleteに渡す。 ③ユーザが文字を入力し、

マッドマックス怒りのデスロードが面白すぎたのでアベンジャーズを見に行けてないminamiです。 先日jQuery 3.0とjQuery Compat 3.0　のalphaバージョンがリリースされたので内容を調べてみました。 jQuery 久々のメジャーアップデートです。今回のアップデートでjQuery2.x系はjQuery3.0に、レガシーブラウザ対応のjQUery1.x系はjQuery Compat3.0 になりました。 主な変更点を見ていきます。 .show(),.hide()メソッドの変更 地味ですが大きな変更です。 .hide() したjQueryオブジェクトにはCSSのdisplay: none がセットされ、.show() されるとその値がクリアになる。jQuery3.0 からはCSS側でdisplay: none が設定されている要素に.show() してもCSSを上書きはし

こんにちは。Latinです。 今年は長めの夏休みが取れそうなので、旅行でも行こうと画策しております。 さて今回は、久々にコーディングネタです。 弊社の最近の案件では、対象ブラウザがIE8+という案件がほとんどになってきました。 「安心してください。IE10以上です。」 なんて言われたら嬉しい限りなんですが、まだまだ少ないのが実状です。 「悪夢のIE7対応」を考えなくて良くなっただけでもコーディングはだいぶ楽になりましたが、「IE8」は「IE8」でいろんなクセを持ってますよね。 今回はそんな今だからこそ、「IE8対応のポイント」をまとめてみます。 【IE8の仕様編】 HTML5に対応していない HTML5のサイトで「IE8対応」が必要になってくる場合、ポピュラーな方法としては二つあります。 html5shiv.js などの拡張ライブラリを IE9 以下のIEで読み込ませる HTML5要素自体

どうもfujiharaです。 連日の雨・雨・雨。人生で今年が一番梅雨を感じれる年かなと。 本日は先日弊社 Latin から紹介がありましたバシャログリニューアルのポイント3 めっちゃ重かったソーシャル周りのスクリプトを非同期かつ、 カウント数のみをJSONで取得する仕様に変更　についての実装方法を説明します。 流れ たいした流れではないのですが、各SNSのAPI用URLに取得したい記事のパラメータを付随し、問い合わせをするとjson形式で値が取得できます。 はてブ数の取得 はてブ数の取得方法です。 // 問い合わせURL は "http://api.b.st-hatena.com/entry.count" // クエリーは url となります。 <script> $.ajax({ url:'http://api.b.st-hatena.com/entry.count' + '?url='

今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe

さてさて、早いものでこの連載企画も最終回となりました。 今回は、サイト上で共通している部分をオリジナルのテンプレートにしてみよう、という回です。 サイト内で同じ記述をいくつも書かなきゃならない場合があると思います。 例えばアクセス解析のトラッキングコードなどは、サイト内のすべてのページに埋め込む必要があったりしますよね。 その場合は、トラッキングコードを独自テンプレートとして切り出し、それを他から読み込むようにすると便利です。 今回はそういう時に活躍する、オリジナルテンプレートについてお話します。 テンプレートを読み込む関数 テンプレートを用意する前に、テンプレートを読み込む関数を確認しましょう。 関数名は get_tempalte_part() です。 get_tempalte_part($slug, $name); 仕様としては、テンプレートは「($slug)-($name).php」

前回では固定ページのカスタマイズを行いました。 WordPress連載企画 第9回では、アーカイブページのカスタマイズ方法を紹介していきます。 アーカイブとは、特定の項目で分類された記事の一覧です。 アーカイブにはいろいろなものがありますが、分類すると以下のようになります。 カテゴリーアーカイブ 日付アーカイブ（年別、月別、日別） タグアーカイブ 作成者アーカイブ これらアーカイブは、それぞれのアーカイブごとにテンプレートを分けることもできますし、1つのアーカイブテンプレートに条件分岐タグを使って処理を共通化することもできます。 1. アーカイブの条件分岐を理解しよう それぞれのアーカイブ条件分岐の関数を見ていきましょう。 is_category() カテゴリーアーカイブかどうか判定する関数です。 <?php if(is_category()): ?> カテゴリーアーカイブです <?php

WordPress連載企画 第8回は、固定ページのカスタマイズについてです。 よろしくお願いします。 前回も紹介したように page.php は固定ページのテンプレートファイルです。この回では、おもにこの page.php のカスタマイズ方法を紹介していきます。 カスタムメニューを実装してみよう! カスタムメニューとは 任意のメニュー（グローバルナビゲーションなど）を、カスタマイズできる機能のことです。カスタムメニューを利用することによって、メニューの内容を動的に生成したり、管理画面で簡単に変更する事が可能になります。 また、カスタムメニューはグローバルナビゲーションだけでなく、複数のナビゲーションを作成することも可能です。 カスタムメニュー化させるページを作成しておく カスタムメニュー化させたいページは、予め作成しておいてください。 今回は固定ページをカスタムメニュー化してみます。作成し

WordPress連載企画 第7回は、記事ページのカスタマイズを行なっていきます。 よろしくお願いします。 記事ページの条件分岐タグ is_single() 記事ページの条件分岐には、 is_single() を使います。 実際に is_page() を使って、title を変更してみましょう。 <?php if(is_home()): //トップページの場合 ?> <title>株式会社バシャログ。馬車道でWeb制作を行う架空の会社。本当はシーブレインだよ</title> <?php elseif(is_single()): //記事ページの場合 ?> <title><?php wp_title( '|', true, 'right' ); ?> |<?php bloginfo( 'name' ); ?></title> <?php else: //それ以外の場合 ?> <title>そ

さて前回、ヘッダーやフッターなどをパーツ化する作業が完了しましたので、実際にトップページをカスタマイズしていきます。 トップページに該当するテンプレートは home.php または index.php になります。今回は home.php を作成し、編集していきます。 パーツ化したテンプレートをインクルードする まずはヘッダーとフッター、サイドバーをインクルードします。 インクルードでよく使われるテンプレートタグは以下のようなものがあります。 <?php get_header(); ?>･･･header.php を読み込み <?php get_sidebar(); ?>･･･sidebar.php を読み込み <?php get_footer(); ?>･･･footer.php を読み込み <?php get_template_part(); ?>･･･ヘッダー、フッター、サイドバー以

10日で覚えるWordPress カスタマイズ、連載第5回の今回は、具体的にHTMLからテンプレートファイル化していく作業の説明を行います。 デバッグモードを有効にする テンプレートのカスタマイズに入る前に、WordPressの「デバッグモード」を有効にしましょう。WordPressにはデバッグモードと運用モードがあり、デバッグモードではテンプレートやプラグインなどのエラーを確認することができます。 テンプレートのカスタマイズをする際には必ず有効にしておくとよいでしょう。 wp-config.php を開き、下記の設定を書き変えます。 /** * 開発者へ: WordPress デバッグモード * * この値を true にすると、開発中に注意 (notice) を表示します。 * テーマおよびプラグインの開発者には、その開発環境においてこの WP_DEBUG を使用することを強く推奨しま

こんにちは。fukasawaです。 WordPress連載企画も4回目になりました。今回はテンプレートタグについてです。テンプレートタグとはどのようなものかという事について簡単に触れつつ、WordPressをカスタマイズするときによく使われるテンプレートタグをご紹介していきたいと思います。 テンプレートタグのチートシートとしてもご利用ください。 テンプレートタグとは WordPressをカスタマイズするとき「ここに投稿記事のタイトルを表示したい」となった場合どのようにすればよいでしょうか。投稿記事のタイトルは記事毎に異なるので、テンプレートファイルに直接書くわけにはいきません。WordPressにはこのような「動的にデータを表示する」というを動作を簡単に実現するために「テンプレートタグ」というものが用意されています。 テンプレートタグはテンプレートファイルに記述して使用します。例えば、投稿

こんにちは、kagata です。 今回は WordPress 連載企画の第3回です。「条件分岐」と「ループ」の基本を学びましょう。 条件分岐とループ（繰り返し）とは 「条件分岐」と「ループ」は、WordPress のテーマづくりのみならずプログラミングのさまざまな分野で欠かすことができない基本的な考え方です。 ここでは特に WordPress のテーマづくりの中でそれらがどんな意味を持つか、説明してみようと思います。 WordPress のテーマづくりの中でいう「条件分岐」とは、ある条件を満たすときに（「～であるならば」）ある要素を表示させるということです。 「ある条件」とはどんなものでしょう？工夫しだいでいろんなことを条件にすることができますが、WordPress のテーマづくりで最初に覚えないといけないのは 「記事データがあるならば」 という条件による分岐です。 そして、「ある条件を満

10日で覚えるWordPress カスタマイズ、連載第2回の今回は、テーマファイルの構造について説明します。 WordPressテーマ 今回は WordPress のテーマについて説明していきます。 テーマとは、サイトのデザインや機能をまとめた一つのファイル群です。wp-content/themes/を見てみると、各テーマがまとめられています。 テーマは WordPress 管理画面の[外観]→[テーマ]で有効化することで切替が可能になります。 それでは今回は、WordPress にデフォルトで同梱されているテーマ「twentytwelve」をベースにカスタマイズしていきます。 テーマ「twentytwelve」を複製し、オリジナルテーマ「bashalog-theme」というテーマを作りました。 テーマに必要なファイルは、このテーマディレクトリ wp-content/themes/bash

こんにちはエンジニアのtanakaです。今日からスタッフ持ち回りでWordPressの連載を始めることになりました。制作環境を作るところからサイトの体裁を整えるところまでやっていくのでよろしくお願いします。 今回はCentOS・Apache・PHP・MySQLのインストール・データベース作成を自動化することでWordPressの開発環境をカンタンに作る方法について説明します。 WordPressの開発環境を自分のPCに開発環境をつくるときにApache+MySQL+PHPがセットになったパッケージを利用して環境をつくることもできます。しかし実運用する環境がLinuxだと、ローカルPCからスクリプト群をアップロードしたときに想定外の挙動に悩まされる恐れがあります。 最近、開発環境をつくるツールとしてVagrantの名前を聞くことが多くなりました。Vagrantは仮想マシンを使った開発環境を構

パズドラのランクが175になりました ishida です。昨日やっとサタン降臨をクリアしてワーイワーイなテンションです。 さて本日はドリルダウンナビゲーションを実装できるjQueryプラグインのご紹介です。 ドリルダウンナビゲーションとは 1画面の中で、リンクなどの項目を選択して大分類から小分類へと対象を絞り込んでいくナビゲーションです。 表示エリアに制限のあるスマートフォンなどのデバイスでよく見られるUIですね。 そんなドリルダウンナビゲーションを簡単に実装できるjQueryプラグインがありましたので、 簡単なデモを作ってみました。 jQuery Sliding Menu デモ まずは、以下のデモをご覧ください。 リンクをクリックするたびに、下層のナビゲーションが表示されていきます。 HTML <div id="menu"> <ul> <li><a href="#">ノーマルダンジョン<

ゴールデンウィークはゴールデンに過ごせそうにない Latin です。 今回はスマートフォンサイトのコーディング周りでのあれこれをまとめてみます。 先日の macky の記事、「スマホサイトの矢印付きメニューをCSSのみで実装する。」もあわせてご覧ください。 viewport 系の設定 描画サイズをデバイスの横幅に合わせる、拡大縮小を不可に これが一番よく見る形式でしょうか？ <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 文字サイズの自動調整をオフにする 各スマホブラウザでは、横向きにすると text-size-adjust の処理が走り、自動で文字サイズを最適化（拡大）する機能があります。 読

4月になったので心機一転ダイエットします！ 思えば3月も心機一転しました。そういえば1月もしました。 …がんばります！ PHP 利用している人にはお馴染みの、「strtotime」という関数があります。 英文形式の日付を Unix タイムスタンプに変換してくれる、それはそれは便利な関数です。そしてこれがまた、凄く沢山の文字列をサポートしてて、上手くつかと色々を便利なのですが、ついつい忘れて毎回ググってしまっている自分がいます。 ということで、自分への備忘も兼ねて記事としてまとめてみようと思います。 基本 まずは strtotime の基本的な使い方。date 関数と組み合わせると便利ですね。 たとえばこんな感じ。 echo date("Y-m-d", strtotime("today")); これで「2014-04-02」が出力されます。まあこれは「date("Y-m-d")」と同じですね