はてなブックマーク

メインクエリ – main query WordPressのコアAPIでは、URLリクエストに応じて必要な記事データを取得するクエリが発行されて、取得されたデータが $wp_query というグローバル変数に格納されます。ここまでを自動的に行ってくれます。 この自動的に発行されるクエリを、メインクエリと呼びます。 素直にメインクエリを出力する場合は、すべてのテンプレートで共通のループ構文を記述すればいいことになります。 <?php if (have_posts() ) : ?> <?php while (have_posts()) : the_post(); ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <?php endwhile; ?> <?php else : ?> Not Foun

Posted on: 2014/12/25 Advanced Schedule Posts 予約公開終了、予約上書き公開ができるプラグインを公開しました https://wordpress.org/plugins/advanced-schedule-posts/ WordPress のディフォルトの時限設定は、予約公開だけです。 Advanced Schedule Posts プラグインを導入することで、予約公開取り下げ、予約上書き公開ができるようになります。 予約公開取り下げ これは単純に予約公開の逆です。 指定した日時に公開を取り下げることができます。公開から下書きになります。

基本の解説 STEP1. リクエスト送信先のパス WordPress で Ajax を使う場合 /wp-admin/admin-ajax.php にリクエストを送ることに決まっている。 JavaScript ファイル内で動的にパスを指定することはできないので、wp_head にフックしてリクエスト送信先のURLをグローバル変数として出力しておく。 > functions.php function add_my_ajaxurl() { ?> <script> var ajaxurl = '<?php echo admin_url( 'admin-ajax.php'); ?>'; </script> <?php } add_action( 'wp_head', 'add_my_ajaxurl', 1 ); wp_head アクションにフックすることで head 要素内に JavaScript

※OOCSSについては過去記事を参照のこと OOCSS（オブジェクト指向CSS）のススメ 難しいOOCSS（オブジェクト指向CSS）の設計 再利用性の範囲を2つに分けて考える OOCSSはとにかくクラスを細分化すればいいってもんではない。 クラス=プロパティ レベルまで細分化されたCSSは、煩雑になるばかりかコストも高くなる。 だが、細分化すること自体が悪いわけではない。 失敗に陥るのは、再利用性の範囲を明確にしていないため。 再利用可能な範囲とは？ いま製作しているサイト内？ それともあらゆるサイト？ まずはこの線引きをしっかりすることが重要だと思う。 プロセッサー型CSSフレームワークmaple.cssのヘルパーには以下のようなクラスが定義されている。（抜粋 .ref { position: relative; } .abs { position: absolute; } .fl {

WordPressによるサイト構築において最も重要な設計について。 私が普段実際に行っているプロセス、考え方を紹介します。 CMS設計の基本的な考え方 クライアント、制作者、運用者、エンドユーザ、すべてにおいてメリットとなり、CMS導入を成功に導くためには、以上の2点を最大限に考慮した設計が最も重要であるといえます。 CMS設計からテンプレート作成までのプロセス 1. CMS設計 サイト設計、デザインも含み、これから紹介するCMS設計手法のプロセス 2. CMS構築 設計に基づいてCMSを構築していくプロセス。あとで紹介するプラグインを使うことでUI上から簡単に行うことができる。 3. テンプレート作成 構築されたCMSと設計に基づくコーディングのプロセス。 以上、設計からテンプレート作成までのプロセスは以上の3ステップに分類されます。 すべてのコンテンツをオブジェクトとして設計する まず

これからWordPressをはじめようと思っている人が参考にしているWebサイトや関連書籍は、どれもこれもいきなりテーマ作成から解説しているものばかりです。 まず最初に学ぶべきWordPressの本質をきちんと解説しているところは、ほぼ皆無です。 テーマ作成というのは、テンプレートタグやコードをを覚えればいいだけの話なのでたいして重要ではありません。あとでなんとでもなります。 それよりも、WordPressとは一体どのような動きをするものなのか？という全体的な仕組みをしっかりイメージできることが最も重要だと考えます。 デザイン、コーディング、プログラミング、いえ、Webの世界に関わらず、すべてのものごとへの深い理解には、その本質をイメージできているかどうかで大きな差が出てくるものです。 普段私が WordPress の講義を行う時には、まずこの本質的なイメージについてしつこいくらい解説する

画像アップロードを作る場合、通常のデータ登録の他に、ファイルアップロード機能を実装しなければならない。これがけっこうめんどい。 でも、画像をバイナリデータとして、直接MySQLに保存することもできる。 テーブル設計 -- -- データベース: `images` -- -- -------------------------------------------------------- -- -- テーブルの構造 `posts` -- CREATE TABLE IF NOT EXISTS `posts` ( `ID` bigint(20) unsigned NOT NULL AUTO_INCREMENT, `imgdat` blob NOT NULL, `mime` VARCHAR(64) NOT NULL, PRIMARY KEY (`ID`) ) ENGINE=MyISAM DEFAUL

コラムです。 まだまだひよっこだった頃、JSの遅延処理とCSSアニメーションについてあれこれ考えていた時の話です。 JSの遅延処理についてあれこれ考えていたこと 次のような処理をしたかった時の話。 まず、明らかに間違ってるパターンのやつ。 パターン1 明らかな間違い console.log(1); setTimeout(function(){ console.log(2); }, 1000); setTimeout(function(){ console.log(3); }, 1000); →サンプル 結果は、console.log(1)の後、console.log(2)とconsole.log(3)が同時。 これは明らか。 であればと、 パターン2 入れ子 console.log(1); setTimeout(function(){ console.log(2); setTimeout(

Posted on: 2013/05/10 WordPress カスタム投稿タイプとカスタムタクソノミーを定義するプラグインを公開しました Custom Post Type Generator https://wordpress.org/plugins/custom-post-type-generator/ カスタム投稿タイプとカスタムタクソノミーを定義するWordPressプラグインを公開しました。 https://youtu.be/1cg9Hqub2RU 動画を再生するにはvideoタグをサポートしたブラウザが必要です。 WordPressをCMSとして使う為に必須となるのが「カスタムフィールド」と「カスタム投稿タイプ＋カスタムタクソノミー」です。 しかし、ディフォルトではこれらの作成をUI上で行うことができず、テーマ内のfunctions.phpに、register_post_typ

Posted on: 2013/06/21 Compass CSSスプライト+Retina対応+データURIスキームのMixin [2014/06/27 更新] ※ SassとCompassが使えることが前提 CompassでCSSスプライトしてRetina対応してデータURLスキームも行うミックスインを作ったので、そのメモ。 準備 ディレクトリ構成は以下の通り（Compass標準） images/spritesディレクトリに必要な画像を格納しておく。 コンフィグファイルの編集 relative_assetsは、ヘルパー関数で生成するURLを相対パスか、それとも絶対パスで表現するかの設定。 これをtrueにすることで、スプライトを生成した時に相対パスになるので設定しておくこと。 > config.rb css_dir = "css" sass_dir = "sass" images_dir

OOCSSとは、構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義する方法である。 OOCSSの考え方に基づいてスタイルシートを記述すると、パフォーマンスと再利用性、メンテナンス性の向上が見込めます。 しかし、OOCSSを上手に設計するのはけっこう難しいのです。なんとなくそれっぽく書いただけでは、OOCSSの導入を成功に導くことはできません。 TwitterBootstrapに代表されるCSSフレームワークなどは、高度に設計されたOOCSSと言えます。そのレベルまで完成度を高めようとするなら、そうとう高度な設計技術が求められます。 初心者が陥りやすいダメな例 > OOCSS? .red { color: red; } .blue { color: blue; } 一見「どんなサイトでも再利用できそうな汎用性のあるクラス定義で、CSSのプロパティを見なくてもマークアップで

Overview Intuitive Custom Post Order Select sortable items from ‘Intuitive CPO’ menu of Setting menu in WordPress. Intuitively, order items( Posts, Pages, Custom Post Types, Custom Taxonomies, Sites ) using a drag and drop sortable JavaScript. Use parameters( orderby = menu_order, order = ASC ) in your theme. You can also override the auto-converted parameters( orderby and order ). ATTENTION: Only

2012/08/12〜2012/08/18 2012/08/05〜2012/08/11 2012/07/29〜2012/08/04 2012/07/22〜2012/07/28 2012/07/15〜2012/07/21 2012/07/08〜2012/07/14 2012/07/01〜2012/07/07 2012/06/24〜2012/06/30 2012/06/17〜2012/06/23 2012/06/10〜2012/06/16 2012/06/03〜2012/06/09 2012/05/27〜2012/06/02 2012/05/20〜2012/05/26 2012/05/13〜2012/05/19 2012/05/06〜2012/05/12 2012/04/29〜2012/05/05 2012/04/22〜2012/04/28 2012/04/15〜2012/04/21 2012

基本構文 query_posts() <?php query_posts( $args ); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <p><?php the_title(); ?></p> <?php endwhile; endif; ?> <?php wp_reset_query(); ?> get_posts() <?php $myposts = get_posts( $args ); ?> <?php foreach($myposts as $post) : setup_postdata($post); ?> <p><?php the_title(); ?></p> <?php endforeach; ?> WP_Query() <?php $the_query = new WP_Quer

サイトにSNSボタンを設置する時、どのように実装するでしょうか？ 公式にアナウンスされているタグを見てみます。 Facebook facebook developers > Like Button <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class=

「tableはダサいからdivを使おう！」とよく聞かれたのは5年前くらいからでしょうか。 それ以後、divにfloatを設定してレイアウトを組むのがスタンダードになりました。 ただし、floatというプロパティを正しく理解していない人はけっこう苦労したはず。 *floatについての正しい理解はこちらの記事を参考のこと > IE6の呪縛 フロート（float）を正しく理解する ということで、floatというプロパティを正しく理解してclearfixをきちんと使えるようになると、floatレイアウトは楽勝になってきます。 ですが、このfloatレイアウトはマークアップが複雑になりがち。 可変レイアウトを基本とするモバイルファーストのWeb制作においては特に。 以下のようなレイアウトをもっとスマートに記述できないものか？ 「display: table」と「display: table-cell

Posted on: 2012/04/20 いまさら聞けないCSSの優先度 – CSS Speciaficity 個別性の計算 突然ですが、問題です。 問題 1 以下コードの「何色？」のテキストは何色になるでしょう？ <style type="text/css"> * { color: black; } p { color: green; } #red p { color: red; } p.blue { color: blue; } </style> <div id="red"> <p class="blue">何色？</p> </div> 正解はこちら 問題 2 以下コードの「どっちに寄ってる？」はどっちに寄ってるでしょう？ <style type="text/css"> body { width: 100%; } div { text-align: right; } </style>

GoogleやFacebookのスマホサイトなどでおなじみの横スライドメニュー。（横からガッコんって出てくるやつ。 一見どのサイトも同じ動作かと思いきや、それぞれ仕様はかなり異なっています。 今回は、GoogleとFacebookの横スライドメニューの仕様の違いを比較してみます。 この観察によって、自分で横スライドメニューを実装する時に検討すべき仕様が見えてくるはずです。 スライドメニューを開く動作 Google

フロート（float）について、スタイルシートリファレンスなどを引くと、「float: 左または右に寄せて配置する」などと簡単に書いてありますが、厳密には違います。まずここで勘違いが起きます。 そして、IE6というクソブラウザは、フロートの仕様に対するバグが甚だしく、この勘違いをさらに加速させてきました。 そのせいで、いまでもフロートに苦しめられている人は多いのではないでしょうか？ 今回はこのフロートについて正しく理解していきたいと思います。 フロートは「左または右に寄せて配置する」だけではない <div style="float: left; width: 100px;"> float: left; </div> <p> text </p> 後続の要素に影響を与えているので、フロートは「左または右に寄せて配置する」だけではありません。 フロートは「回り込み」でもない <div style

Posted on: 2012/11/22 WordPress プラグイン開発者用メモ 多言語対応 – 翻訳リソースファイルの作成手順 プラグイン側の設定 1. 多言語化文字列の記述 多言語化の対象となるテキストを _e() などで記述しておく。 ※_e() 内の文字列に日本語が含まれているとあとでエラーになるので注意。 _e('Add New', '{plugin-name}'); プラグイン内の翻訳ファイルのみを適用する場合は、第二引数を指定すること。 第二引数を指定しないと、WordPress本体の翻訳ファイルも適用される。 2. load_plugin_textdomainの記述 load_plugin_textdomain('{plugin-name}', false, basename(dirname(__FILE__)).'/lang' ); この場合、plugin-name

※連続改行したいという人がよくいますが、brタグによる連続改行はHTML5の規則的にはダメダメです。セマンティック的にもなんの意味もないのでやめましょう。マージンが欲しければスタイルシートで定義してください。 さて、上記のように入力した値は以下のような構造で出力されます。 <p>あああ</p> <p> いいい <br /> ううう </p> ビジュアルエディタ上での見た目と出力された見た目を同じにするため、すなわち、段落としてのスタイルを定義するならば、pタグのスタイルは以下のようになるでしょう。 > テーマ/style.css p { display: block; margin: 1em 0; } TinyMCE ビジュアルエディタのTinyMCEも考慮するべきでしょう。 それぞれのボタンで挿入されるタグのスタイルも指定しておきましょう。 最初にリセットCSSをしない場合は不要です。

Posted on: 2012/10/17 WordPress 直感的に投稿記事の並び順を変更するプラグインを公開しました Intuitive Custom Post Order Intuitive Custom Post Order Intuitive Custom Post Order WordPressの投稿記事はディフォルトで投稿日時の降順ソートになります。 ただのブログであれば問題ありません。 ただ、カスタム投稿タイプとカスタムフィールドを組み合わせて、WordPressをCMSとして開発・運用する場合には、投稿記事というのは”コンテンツ“の意味合いが強くなり、並び順、つなり表示順も自由に変更したいという要望も出てきます。 そこで、直感的に投稿記事の並び順を変更するプラグインを公開しました。 Intuitive Custom Post Orderプラグインの概要 WordPres

Posted on: 2012/10/19 WordPress マルチサイトの新規サイト作成時にカスタム初期設定とカスタム初期データを設定しておく WordPressでマルチサイトを構築する場合、連なる複数のサイト同士はなんらかの関連性を持っているはずです。よって、マルチサイトにおいては、初期設定と初期データをカスタム設定した状態で新規サイトを作成できると良いです。 例えば、ディフォルトテーマを設定しておいたり、共通カテゴリーを初期データとして登録しておく、などです。 一般的にマルチサイトでは、プラグインとテーマは一括で有効化できます。 カスタム投稿タイプやカスタムタクソノミーはテーマフォルダ内のfunctions.phpで定義しておけます。 しかし、テーマの選択や、パーマリンク設定、カテゴリーの入力などは、サイトを追加する毎に設定しなくてはなりません。 この最後の作業を、初期設定と初期デ

仕組みは以下 Affixプラグインの仕組みを図解 まず、Affix要素はスクロール量とoffset引数によって、「.affix-top → .affix → .affix-bottom」と、クラスが自動的に変化していく。 offset引数（offset:top, offset:bottom）は以下の高さを指定する。 そうすると、状態変化と共にクラスが変化していく。 という仕組みがわかれば、さきほどの動作サンプル3でいいように見える。 でもこれは不完全。 正確には、”BootstrapのCSSを読みこんでいる場合”は不完全。 Bootstrapのサイトで実装されているAffixへの疑問 BootstrapのCSSを読み込んでいる場合、これだけではうまくいかないはず。 Affixが発動すると親要素の高さがゼロになるはず 追従を開始する（.affix）と、通常フローから逸脱する、つまり「posi

Posted on: 2012/09/27 WordPress 一般ユーザ向けの「サイト設定」のカスタムメニューを作成する ここで言う サイト設定 とは、「サイトのタイトル」、「キャッチフレーズ」など、サイト全体の共通情報として設定しておくべき内容を指しています。 また、WordPressの構築・テンプレート作成などを行う制作者のことを管理者ユーザ、WordPressで構築されたサイトを管理・運用する人のことを一般ユーザと呼ぶことにします。 基本的に一般ユーザは技術スキルがないものとします。 さて、WordPressでサイト設定を行うページと言えば「管理画面 > 設定 > 一般設定」でしょうか。 しかしこのページには、サイト設定だけではなく、WordPressのシステム設定も混在しています。一般ユーザには開放しない方がよさそうです。 ということで、このページの中のサイト設定に該当する部分（

2012/9/8に行われた「HTML5 Conference 2012」のレビュー 私が参加したセッションの内容に絞ってまとめておきます HTML5の文書構造 HTML5は厳密な文書構造を持っている。 HTML4でのdivの乱用などは許されないので、正しいマークアップをすることが重要。 HTML5の文書構造を視覚的に解析してくれるサイト: HTML 5 Outliner Chromeアドオン: HTML5 Outliner パララックスなWebサイト スクロールでぐりぐり動く、いま流行りのWebサイトデザイン http://www.nike.com/jumpman23/aj2012/ PCサイトでの実装は比較的簡単そうだが、スマホなどマルチデバイスでも問題なく動作することを考えるとかなり大変そう。 スピーカーの白石氏が制作ディレクションを行った、シーエーモバイルのサイトがレスポンシブでパラ

言わずと知れた WordPress にコンタクトフォームを設置するプラグイン「Contact Form 7」のデザインのカスタマイズ方法です。 フロントエンドの開発セオリーを知っている人にとってはあたりまえの話ですが、迷える子羊のために。 Contact Form 7 の使い方については解説しません。ググってください。 Contact Form 7 のテンプレートは以下のように設定した前提で解説します。 マークアップ構造を分析 初期状態 <div class="wpcf7" id="wpcf7-f49-p2-o1"> <form action="/wordpress/contac/#wpcf7-f49-p2-o1" method="post" class="wpcf7-form"> <div style="display: none;"> ... </div> <dl> <dt>名前 (必

Posted on: 2012/09/03 WordPress wp_enqueue_scriptの仕様変更によってコンフリクトが発生している模様 WordPressで外部jQueryや独自JavaScriptファイルを読み込む場合、コンフリクトを回避する為にwp_enqueue_script関数を使うと思います。 ところが最近、wp_enqueue_scriptを使っているにも関わらず、「突然コンフリクトが発生した」もしくは「一部のJavaScriptが動かなくなった」という話がよく聞かれます。 特にContactForm7プラグインを使っている人から多く聞かれます。 これはContactForm7プラグインの不具合ではなく、おそらく wp_enqueue_script が WordPress3.3 から仕様変更されたことが原因だと考えられます。 最新の wp_enqueue_scrip