今回は独自のテーブルを作成するのでコンテンツタイプは「拡張コンテンツタイプ」を選択します。 「Singular Label」に入力した文字列を元にテーブルが作成されます。 「NEXT STEP」ボタンを押すとテーブルが作成され、各項目を設定する画面が表示されます。 バリデーションなどの設定もここで行います。 とりあえず下記のように作成しました。 デフォルトでは管理画面の入力が英語の部分があるので必要なら「Labels」タブで日本語の設定をします。 終わったら「Save Pod」で設定の保存をします。 データベースを確認すると「wp_pods_store」というテーブル名でちゃんとに作られてますね。 すごい！ あとは左メニューに設定したラベル名で項目が追加されているので、適当に作成しておきましょう。 テンプレートの作成 データベースを作成しただけでは意味ないので、テンプレートに入力したデータ

WordPressのカスタムフィールドをコードベースで追加できるライブラリ「Custom Metaboxes and Fields for WordPress」 Posted: 2014.05.22 / Category: WordPress / Tag: Plugin WordPressのカスタムフィールドプラグインはGUIでお手軽に作成できるのもありますが、個人的にはコードで作成できた方が使い回しができたりするので好んでます。 「Custom Metaboxes and Fields for WordPress」はGitHubで公開されていて更新も活発そうだったので使用してみました。 テキストフィールドの追加 まずは簡単なテキストフィールドを追加してみましょう。 「functions.php」で下記を記述してダウンロードした「metabox」フォルダの中の「init.php」を読み込み

Posted: 2012.11.09 / Category: HTML&CSS, javascript / Tag: jQuery, レスポンシブ グローバルナビゲーションはPCだと画像で作る場合が多いですが、スマホだとCSS3がフルに使えたりフォントが綺麗だったりするので、画像ではなくテキストで表示したいことがあります。 そこでレスポンシブで画像をテキストを切り替える方法をご紹介します。 html & css 画像をリストで配置した他にaタグにdata属性でaltと同じテキストを記述してます。 html <nav> <ul> <li><a href="#" data-label="ホーム"><img src="img/nav01.png" alt="ホーム" width="108" height="58" /></a></li> <li><a href="#" data-label="サ

完全に独立したテーブルを作成するのはちょっと大変なので、投稿データ（postsテーブル）に関連付けされたテーブルを作成します。 WordPressにはカスタムフィールドという機能がありますが、あれはpostmetaというテーブルに保存されるので、これをオリジナルのテーブルに保存するイメージです。 カスタムフィールドをオリジナルのテーブルに保存するメリット カスタムフィールドを作成すると「price」とか「pdf」などのキーを設定しますが、これは「postmeta」テーブルの「meta_key」カラムにすべて保存されます。 これはこれで柔軟性があっていいのですが、検索性がいまいちだったりします。 これをオリジナルのテーブルにしてキーをオリジナルのカラムに設定すればなんとなく気分がいいです。 プラグインを有効にしたときデータベースを作成する 直接データベースを編集してもいいですが、配布を目的と

プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co

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

「WPAlchemy MetaBox」の使用方法 カスタムフィールドは「WPAlchemy MetaBox」というライブラリを使用します。 基本的な使用方法は下記の過去記事を参考にしてください。 WordPressでカスタムフィールドをお手軽に実装できるクラスライブラリ「WPAlchemy MetaBox」 （実はこれだけでカスタムフィールドの数は変更できてしまいますね、、、） カスタムフィールドの設定 「wp-content」内に「wpalchemy（ライブラリ本体）」を設置したら、使用しているテーマディレクトリに「metaboxes」というディレクトリを作成して、その中に「setup.php」「metabox.php」「meta.js」「meta.css」を作成します。 ファイルの内容はそれぞれ下記のようになります。 「setup.php」で基本設定をします。 setup.php <?

※WordPress3.3.2を使用しています。 2012.06.01 「投稿記事だけ検索したい」に抜けている部分があったので修正しました。 検索フォームの設置 一つのテキストフォームだけで検索する場合は以下のコードを表示させたい位置に配置するだけですね。 wp template <div id="search-box"> <form method="get" action="<?php bloginfo( 'url' ); ?>"> <input name="s" id="s" type="text" /> <input id="submit" type="submit" value="検索" /> </form> </div> あとは「search.php」を作成して適当にループさせれば検索結果が表示されます。 投稿記事だけ検索したい 標準のサイト内検索は固定ページも検索範囲に含まれて

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-

Posted: 2012.02.03 / Category: javascript / Tag: jQuery jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){ e.preventD

Posted: 2012.01.12 / Category: HTML&CSS, javascript / Tag: jQuery センターのコンテンツを固定幅にして、その左右の背景を別の画像にしたいときtableを使用すれば簡単ですが、今の時代tableで囲んでしまうのはあれですね。 そこでcss+jQueryでなんとかしてみます。 中心で分かれた背景 とりあえず中に配置するコンテンツは考えないで左右で別々の背景画像を設定してみます。 デザインによっては左右でdivを配置する必要があるかもしれませんが、今回は全体を囲うdivと半分だけのdivを配置してみます。 html <div id="wrap"> <div id="left-bg"></div> </div> css html, body, #wrap, #left-bg { height: 100%; } #wrap { back

Posted: 2011.11.07 / Category: javascript / Tag: jQuery, アニメーション 最近は一ページに内容を詰め込んだ縦長のページが増えてきましたね。 そこでスクロールすると区切り（セクション）ごとに背景が変化したら、面白いのではないのかと思いましたのでやってみました。 html sectionはhtml5ではなくdivにclassでマークアップした昔ながらの形式にしました。 html <div class="section"> <h2>Section0</h2> <p> ここは0番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section1</h2> <p> ここは1番目のコンテンツです。 </p> </div> <div class="section"> <h2>Section2</h2>

ライブラリのダウンロード ソースはGitHubにあります。以下からダウンロードしてください。 farinspace/wpalchemy ここでは現在最新の「1.4.15」をダウンロードします。 Wordpressのバージョンは「3.2.1」です。 ダウンロードしたファイルを解凍すると「wp-content」の中に「wpalchemy」フォルダがあるので、Wordpressがインストールしてある「wp-content」フォルダに入れます。 これでとりあえず準備完了です。 現在使用しているテーマフォルダにカスタムフィールド用のフォルダを作成して、その中にファイルを作成します。 ここでは「metaboxes」というフォルダの中に「setup.php」と「metabox.php」を作成しました。 また、ダウンロードしたファイルの中にcssファイルがありますので同じ階層にいれておきましょう。 場所は

Posted: 2010.08.28 / Category: WordPress / Tag: テンプレートカスタマイズ, 管理画面 Wordpressを複数人で管理する場合ユーザーページ（authorテンプレート）を利用すれば、ユーザーごとの自己紹介ページを簡単に作成できます。 この記事では管理画面の「ユーザー編集」で入力した情報をユーザーページ（authorテンプレート）に表示させることから始め、「ユーザー編集」での不要な項目の削除や、最終的にはオリジナルのフィールドを追加するということをやったりしてみます。 ユーザーページを確認してみる。 まずユーザーページを確認してみましょう。 ブログURLのあとに「/author/[ユーザー名]」でユーザーごとのページが表示されます。 http://www.example.com/author/[ユーザー名] 何も設定していないとアーカイブページ

もくじ カスタム投稿タイプの設定 カスタム分類（タクソノミー）の設定 カスタムフィールドで日付を入力 jQuery UI で日付を入力しやすくする イベント一覧画面に項目（カラム）を追加する 未来のイベントだけを表示するアーカイブテンプレート 月別にイベントを表示する 月別にイベントにリンクするナビゲーション また、タイトルいは「カスタム投稿タイプで」なんて書いてありますが、どちらかというとメタデータで日付の取り扱い的なことがメインとなっています、ベーシックなカスタム投稿タイプの例は「WordPressのカスタム投稿タイプで作るよくある質問（Q&A）ページ」 をご覧ください。 カスタム投稿タイプの設定 管理画面で入力するところから作っていきます。最初はカスタム投稿タイプです。 function.php function event_postype() { $labels = array(

画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin