WordPress + Pods Framework でカスタムデータベースをさくっと作ってみる
WordPress + Pods Framework でカスタムデータベースをさくっと作ってみる WordPressはカスタムフィールドや投稿タイプを駆使すればわりと自由にフィールドを作成できますが、基本的には記事用のデータベースなのでシンプルなデータベースを作成したい場合ちょっと無駄なところが出てきたりします。 そこで Pods Framework というプラグインを使用して簡単にカスタムデータベース（テーブル）を作成する方法をご紹介します。 投稿日2015年02月12日 更新日2015年02月12日 動作環境 WordPress 4.1 Pods 2.5.1.1 準備 Podsプラグインは公式のプラグインディレクトリからダウンロードできます。 Pods – Custom Content Types and Fields プラグインを有効化すると左メニューに「Pods Admin」という
WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編]
WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編] WordPress5.0でデフォルトになる予定の新エディター「Gutenberg」。 ブロックを組み合わせてページを作成できることが特徴となっていますが、このブロックをオリジナルで作成してみたいと思います。 投稿日2018年08月29日 更新日2018年08月29日 Gutenbergブロックの開発環境の構築 Create Guten Blockという開発ツールキットを使用するとモダンな開発環境が簡単に構築できます。 よかったらこちらの記事もご覧ください。 Create Guten BlockでGutenbergのカスタムブロック開発環境を構築する 一番シンプルなカスタムブロック Create Guten Blockで作成したプラグインのディレクトリは下記のようになっています。 ├── package
![WordPressの新エディターGutenbergでカスタムブロックを作成する[初級編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/013059453a5603974ecefa934615f2b4692ff33a/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2015%2F04%2Fwp-logo.png){kind=tracking}
AjaxでもURLを更新して履歴を作れるHTML5のpushState試してみた
Posted: 2011.06.20 / Category: javascript / Tag: Ajax, HTML5 高速なWebアプリケーションを作成するにはAjaxがなくてはならないものとなりました。AjaxにはURLが更新されず、そのためブラウザの戻るも使用でません。 このような問題を解決するためにHTML5で追加されたのが「pushState」です。 pushStateを使用していないサンプル jQueryのloadメソッドを使用したコンテンツ切り替えの簡単なサンプルです。 page1.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>page1</title> <link rel="stylesheet" href="style.css"> <script type="text
JavaScriptを短く書くためのショートコード集
JavaScriptを短く書くためのショートコード集 知っておくとちょっとだけコードが簡潔に書けるかもしれないショートコード集です。 投稿日2014年12月25日 更新日2014年12月25日 小数点以下切り捨て 「Math.floor」で切り捨てですが、 Math.floor(12.6598); //12 数値の前に「~~」付けるだけでもできます。 ~~12.6598; //12 桁数の制御 「～e」に続く数字で桁数を制御できます。 1e1 //10 1e2 //100 1e3 //1000 1e4 //10000 1e5 //100000 2の累乗はシフト演算子 2の累乗は左シフト演算子（<<）でできます。 200 << 1; //400 200 << 2; //800 200 << 3; //1600 逆は右シフト演算子（>>）です。 200 >> 1; //100 200 >> 2
jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 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-decoration
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
WordPressでオリジナルのデータベース（テーブル）を作成する [プラグイン開発中級編]
完全に独立したテーブルを作成するのはちょっと大変なので、投稿データ（postsテーブル）に関連付けされたテーブルを作成します。 WordPressにはカスタムフィールドという機能がありますが、あれはpostmetaというテーブルに保存されるので、これをオリジナルのテーブルに保存するイメージです。 カスタムフィールドをオリジナルのテーブルに保存するメリット カスタムフィールドを作成すると「price」とか「pdf」などのキーを設定しますが、これは「postmeta」テーブルの「meta_key」カラムにすべて保存されます。 これはこれで柔軟性があっていいのですが、検索性がいまいちだったりします。 これをオリジナルのテーブルにしてキーをオリジナルのカラムに設定すればなんとなく気分がいいです。 プラグインを有効にしたときデータベースを作成する 直接データベースを編集してもいいですが、配布を目的と
![WordPressでオリジナルのデータベース（テーブル）を作成する [プラグイン開発中級編]](https://cdn-ak-scissors.b.st-hatena.com/image/square/99500480ddcdd794be24c368920ae81bfc167a7c/height=288;version=1;width=512/https%3A%2F%2Fwww.webopixel.net%2Fblog%2Fwp-content%2Fuploads%2F2012%2F09%2F0911_s.jpg){kind=tracking}
WordPressのプラグインを開発しよう（初級編）
プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
可変グリッドレイアウトなWebデザイン集めてみました