タグ

2013年3月8日のブックマーク (17件)

  • query_postsで複数条件の指定

    ご教授ありがとうございます。 ご指定いただいた方法にて複数指定を実現することができました。 ただ、条件に一致したものがすべて表示されてしまうので、同じ記事がtest1,test2,test3に該当した場合に3回ほど表示されてしまいました。この重複を避けるにはどうしたら良いのでしょうか? この点と、 もし仮に query_posts(‘meta_key=test1&meta_value=東京’); query_posts(‘meta_key=test2&meta_value=埼玉’); query_posts(‘meta_key=test3&meta_value=神奈川’); というようなカスタムフィールドの”キーと値”の両方で複数判定(上記例の3つを一緒に条件にしたい)をしたい場合はどのようにしたら良いのでしょうか? 当初の質問を解決いただいたのに申し訳ありませんが、もしよろしければこれに

    query_postsで複数条件の指定
  • [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)

    figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端:リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだ HTML5.JPを読みに行きましょう。すると figure 要

    [HTML5]正しいfigure要素の使い方(文脈まで深く考えた)
  • 特定の範囲から、ハミ出した長い文章を省略し、「…」と表示する方法 | 株式会社WEB企画

    特定の範囲から、ハミ出してしまった文章を省略し、「…」と表示する方法をご紹介します。 あまり使用する機会は無いかもしれませんが、例えばウェブマガジン系の記事タイトルなんかは、長くなりがちなので、パンくずリストのレイアウトに困ったりします。そういった時に、是非使ってみて下さい。 CSSで実装します 省略したい文章の、親要素に次のようなCSSを付与します。 【省略予定の文章】 <div class="shortcut">最近は、めっきり夏になってしまって、半ズボンを履くかどうか悩んでいます。</div> 【CSS】 .shortcut { width: 300px; /* 要素の横幅を指定 */ white-space: nowrap; /* 横幅のMAXに達しても改行しない */ overflow: hidden; /* ハミ出した部分を隠す */ text-overflow: ellips

    特定の範囲から、ハミ出した長い文章を省略し、「…」と表示する方法 | 株式会社WEB企画
    mimosafa
    mimosafa 2013/03/08
  • CSS3のtext-shadowを使ったテキスト装飾のサンプル集

    たまに使うので自分用にメモします。 css3のtext-shadow等を使用した テキスト装飾のサンプルコードの 備忘録です。工夫すればいろいろ と作れるんでしょうけど、とりあえず よく使うものをピックアップします。 自分用のコピペ用サンプルです。用途は限られますけど、iPhone用サイトなどでも使えるので覚えておいて損は無いかなと思います。テキストだけだと管理が楽でいいですよね。 CSS3 text-shadow sampleいろいろ。フォントGoogle font APIを使用しています。付けてるネーミングは無いと不自然だから付けた的なものですので気にしないで下さい。 Default

    CSS3のtext-shadowを使ったテキスト装飾のサンプル集
  • 12 Fun CSS Text Shadows You Can Copy and Paste

    Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity. Today we’re going to run through several text-shadow examples that you can copy and paste for your own work. The Ultimate Designer Toolkit

    12 Fun CSS Text Shadows You Can Copy and Paste
  • WordPressの新着情報表示にカスタム投稿タイプを含める方法 – Simple Colors

    @junirock78 さんが、ツイッターでカスタム投稿タイプも含めた新着情報を表示する方法を質問されていたので、おせっかいかとは思いつつ話の輪に加わってみました。 方法としては、テンプレートで query_posts または get_posts などを使って取得する方法が一般的だとは思いますが、これだとデータベースへの問い合わせが新たに発生してしまいます。 トップページでの表示であれば、もともと最新の投稿を取得してきていますから、これにカスタム投稿タイプを含めるようにしてしまえば、新たなデータベースへの問い合わせもなく、パフォーマンス的にも良くなりますね。 では、どうすれば良いかというと、データベースへの問い合わせが発生する直前に、トップページだったら(最新の投稿を表示している = is_home() がtrue)、リクエストの条件にカスタム投稿タイプの指定を追加してあげれば、あとは W

  • WordPressのゲスト投稿(フロントエンド)から複数画像のアップロード

    ゲスト投稿から画像アップロードするには WordPressの管理画面ではなく、表画面(フロントエンド)から画像をアップロードする方法はこちらが参考になります。 で、今回はこちらを参考に複数画像のアップロードにチャレンジしてみようかと。 functions.php functions.phpに以下の記述を書きます。3つのファイルの呼び出しをあらかじめしないとだめなようです。 function insert_attachment($file_handler,$post_id,$setthumb='false') { // check to make sure its a successful upload if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false(); require_once(ABSPATH .

    WordPressのゲスト投稿(フロントエンド)から複数画像のアップロード
    mimosafa
    mimosafa 2013/03/08
  • WordPress春のお掃除大作戦!データベースをキレイにし最適化する方法

    WordPressはバグフィックスやセキュリティパッチで最新のバージョンにしておくと、かなり強靱で効率的なアプリケーションです。しかし長く使っていると、データベースに不必要な値が貯まってしまい、それが原因でサイトの速度を遅くしてしまいます。 WordPressのデータベースを掃除し、各種設定を見直し、最適化する方法を紹介します。 How To Clean Up & Optimize Your WordPress Install 下記は各ポイントを意訳したものです。 1. データベースのバックアップ 2. ファイルのバックアップ 3. 使用していないプラグインのゴミを掃除 4. 自動保存された記事の掃除 5. 記事のメタデータを掃除 6. サムネイル生成を停止 7. スパム判定待ちを削除 8. 古い記事だけコメントを閉じる 9. データベースの最適化 10. 最後にセキュリティのチェック 1

  • busilab.com is available at DomainMarket.com

    What's in your Domain Name? Print This domain name will potentially help you bring in more customers and profits every day, as the domain itself goes up in value. A super premium .Com domain name from DomainMarket.com means instant branding, search engine, and marketing benefits. We make it safe, easy and affordable for you to own busilab.com right away. Click here to purchase busilab.com DomainMa

    busilab.com is available at DomainMarket.com
  • query_postsとget_postsの違い[追記あり]

    [2013/07/25 追記] get_posts で検索してこの記事にアクセスされる方が多いのですが、この記事はquery_postsとget_postsをソースコードで比較したものですので、使い方を知りたい方は「WordPressでページ送りが動かないのはどう考えてもquery_postsが悪い!【pre_get_postsまとめ】」も合わせてご覧ください。 query_posts と get_posts。どちらもWordPressから投稿のデータを取得するのに使えるので、特に使い分けを意識していない方も多いのではないかと思います。自分自身もはっきり結論がでているわけではないのですが、今回はこの違いについて考えてみます。 ※ WordPressについての立ち入った内容なので、予めお断りしておきます wp-includes/query.php に書かれています。 function &am

    query_postsとget_postsの違い[追記あり]
  • jQueryで特定の要素を包み込む方法まとめ

    基礎編 wrap マッチする要素を1つずつ囲む場合は wrap を使います。 <div class="hoge"> <span>span</span> <span>span2</span> <b>b</b> </div> $( '.hoge span' ).wrap( '<p></p>' ); <div class="hoge"> <p><span>span</span></p> <p><span>span2</span></p> <b>b</b> </div> wrapInner マッチする要素の子要素を囲む場合は wrapInner を使います。 <div class="hoge"> <span>span</span> <span>span2</span> <b>b</b> </div> $( '.hoge' ).wrapInner( '<p></p>' ); <div class="

    jQueryで特定の要素を包み込む方法まとめ
  • AWS S3にWordPressのメディアを自動アップロードする「絡新婦」を試す | Gatespace's Blog

    @wokamoto さんの新作プラグイン「絡新婦」。WordPress のメディアライブラリにアップロードされたファイルを自動的に AWS S3 にアップロードし、リンクのURLも変更してくれるプラグインです。 単に画像ファイルを別サーバーに置くなら Flickr や Picasa にアップロードし WordPress 側に挿入すれば事足りるのでしょうが、以前から EC2 で WordPress を動かしつつ画像類はS3に置いて連動させる(サーバーを分散する)方法に興味があったので試してみました。 プラグイン Nephila clavata (絡新婦) について このプラグインは WordPress のメディアライブラリにアップロードされたファイルを WordPress のあるサーバーと同時に Amazon S3 にも自動的にアップロードします。 表示する際は the_content と

    AWS S3にWordPressのメディアを自動アップロードする「絡新婦」を試す | Gatespace's Blog
  • WPHacks

  • カスタムフィールドから作成したアーカイブリストの昇順

    以前、下記の質問をさせていただいたものです。 http://ja.forums.wordpress.org/topic/8389?replies=7 こちらの方法で年別アーカイブの表示には成功したのですが、 記事がカスタムフィールドの日付順になっていないことに気がつきました。 どこかで記述を間違えているか、 下記のコードの中を変更すればいいのかと思い、 いろいろと試してみたのですが解決できません。 (実際は’date’に日付のキーを入れています。) add_action( 'init', 'my_init' ); function my_init() { global $wp; $wp->add_query_var( 'meta_key' ); } add_action( 'pre_get_posts', 'my_pre_get_posts' ); function my_pre_get_

    カスタムフィールドから作成したアーカイブリストの昇順
  • Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め! - Web学び

    2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その1 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に

    Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め! - Web学び
    mimosafa
    mimosafa 2013/03/08
  • 画像を遅延読込させる2 - WEB製作記

    画像を遅延読込させる では画像を表示領域に達した時点でロードしましたが、ページのロードは完了したことにして、すぐにバックグラウンドで画像を読み込んで欲しい時があります。 遅延読み込みと言うよりも ロードタイミングを遅らせて先読みする という感じでしょうか。 これを行いたい具体例としては、スマホ等のモバイルデバイスで遅延読み込みをしたい時です。 モバイルデバイスでは表示領域に来た時に読み込み始めては結局待たされてしまう為です。 HTMLを読み込んだ時点で読み込み完了と見せかけて、 onload のタイミングで画像を全てバックグラウンドで読み込みます。 onload のタイミングで読み込みを開始しているので、表示領域に来た頃には少なくとも表示したい画像は読み込めているという目論見です。 HTMLは 画像を遅延読込させる と同じです。 <img class="lazy" src="/img/du

    mimosafa
    mimosafa 2013/03/08
  • jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン

    jQueryで遅延ロード(遅延読み込み)を汎用的に実現する「ScrollTrigger」プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。 1.目的 Facebookの「いいね!」ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。 2.機能 ページをスクロールして、