WordPressのショートコードを自作してみる
Posted: 2010.07.11 / Category: WordPress / Tag: ショートコード Wordpressで記事を書いていると、投稿記事からテンプレートタグを使いたくなったり、自作のプログラムを動かしたいくなる場合があると思います。 そんなときに便利なのがショートタグです。 ショートタグは投稿記事に[]（ブラケット）内にショートコード名を記述することで、あらかじめ設定しておいた関数を呼び出すことができます。 で、肝心の関数を記述する場所はというと、プラグインとして読み込ませたり、テンプレートフォルダのfunctions.phpに記述します。 プラグインというとちょっと大げさな気がするので、今回はfunctionsファイルの方を試してみたいと思います。 たぶん一番シンプルなショートコード ショートコード第一号は呼び出すと決められた文字列を返すだけという、実用性0のコー
jQueryでHTML5の独自データ属性（data Attributes）を扱う
Posted: 2011.07.01 / Category: HTML&CSS, javascript / Tag: HTML5, jQuery HTMLにはさまざまな属性がありますが、HTML5からはdata属性を使用することで独自の設定がきるようになりました。最近ではjQueryMobileで使用されていることもあり、お目にする機会も増えたのではないでしょうか。 この記事ではjQueryを使用してこのdata属性にアクセスする方法をご紹介します。 data属性のマークアップ data属性は「data-」以降に文字列を指定することで設定できます。 たとえば「data-role」に「hoge」という値を設定する場合はマークアップは次のようになります。 html <div data-role="hoge">太郎</div> jQueryでこの「hoge」という値を取り出すには、dataメソッ
jQueryでFacebookページのウォールを自分のサイトに表示する方法（簡易バージョン）
Posted: 2012.08.21 / Category: javascript / Tag: jQuery FacebookページのウォールはFeedを出力しています。 これをGoogle AJAX Feedを利用してjsonpへ変換してjQueryで表示する方法をご紹介します。 FacebookページのID確認方法 FacebookページのURLを設定していない場合、URLの末尾がIDになります。 もしURLの設定をしている場合、IDはURLではわかりませんので「graph.facebook.com」にアクセスすると簡単に確認することができます。 たとえば「Nike Japan」だったら、Facebookページは下記ですね。 http://www.facebook.com/nikejapan そのままドメイン名を「graph.facebook.com」にしてアクセスします。 http
jQueryでスクロールすると表示する系いろいろ
Posted: 2012.03.08 / Category: javascript / Tag: jQuery, アニメーション 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-
WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ
Posted: 2010.11.07 / Category: WordPress / Tag: テンプレートカスタマイズ Wordpress3.0に追加された目玉機能（？）としてカスタム投稿タイプというものがあります。 こちらの機能は通常のブログなら特に必要ない機能ですが、CMSとして使用する場合はかなり便利らしいです。 いまさらという感じはしますが、カスタム投稿タイプを使用してコーポレートサイトでありがちな「よくある質問（Q&A）ページ」の作成を行います。 カスタム投稿タイプとは 例えば「お知らせ」「よくある質問」などのページを作成したい場合、今までだったらカテゴリー分けなどでやりくりしていたと思います。 でもこれだと、しょせんブログでなんとかやってるって感じで、わかりやすいとは言えませんでした。 今までは投稿やページなど決まった項目にしか記事を書けませんでしたが、カスタム投稿タイプを使
WordPressのカスタム投稿タイプでイベント情報ページを作ってみる
もくじ カスタム投稿タイプの設定 カスタム分類（タクソノミー）の設定 カスタムフィールドで日付を入力 jQuery UI で日付を入力しやすくする イベント一覧画面に項目（カラム）を追加する 未来のイベントだけを表示するアーカイブテンプレート 月別にイベントを表示する 月別にイベントにリンクするナビゲーション また、タイトルいは「カスタム投稿タイプで」なんて書いてありますが、どちらかというとメタデータで日付の取り扱い的なことがメインとなっています、ベーシックなカスタム投稿タイプの例は「WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ」 をご覧ください。 カスタム投稿タイプの設定 管理画面で入力するところから作っていきます。最初はカスタム投稿タイプです。 function.php function event_postype() { $labels = array(
WordPressのhead要素を整理してみる
静的HTMLだった場合のhead要素 いきなりWordpressに入る前に静的HTMLで作成する場合のhead要素を確認してみます。 あれが足りない、ここは違うだろという意見はあると思いますが、大きく外していないはず（多分……）。 HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="imagetoolbar" content="no" /> <meta
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
WordPressのカスタム投稿タイプを関連付けするプラグイン「Relation Post Types」
プラグインのダウンロード プラグイン本体を下記URLからダウンロードして、有効にします。 WordPress › Relations Post Types 現時点で最新のバージョンである1.2.1を使用します。 Wordpressのバージョンは3.2.1です。 店舗と商品の関係とか たとえば店舗と商品をカスタム投稿タイプを設定してこれらを関連付けしてみたいと思います。 そういう場合は店舗をカスタム分類を使用した方がスマートな気がしますが、カスタム分類は基本カテゴリーなのでもし店舗のページもしっかりと作り込みたいといった場合はカスタム投稿タイプにした方がいいのではないのかと思います。 カスタム投稿タイプの設定 さくっとカスタム投稿タイプの設定をしましょう。 functions.phpに以下のコードを追加します。 functions.php /* 店舗のカスタム投稿タイプ ==========
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
