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」という
SVGでセクションの区切りを斜め線にする
SVGでセクションの区切りを斜め線にする セクションの区切りを斜め線とかにしてしてみると、ちょっと他と違う感がでるかもしれない! 斜め線はCSSで回転させたりする方法もありますが、ここではSVGを使用した方法をご紹介いたします。 投稿日2015年10月14日 更新日2015年10月14日 HTML HTMLは単純にsectionで並べるだけです。 HTML <section id="section1"> <div class="inner"> <h2>Section First</h2> </div> </section> <section id="section2"> <div class="inner"> <h2>Section Second</h2> </div> </section> <section id="section3"> <div class="inner"> <h2>S
CoffeeScriptでjQuery使うときのメモ
Posted: 2012.11.19 / Category: javascript / Tag: jQuery CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p').
jQuery/CSS3で雲をゆらゆらさせる
jQuery/CSS3で雲をゆらゆらさせる 雲の画像を背景に設定してゆらゆらさせてみました。 jQueryバージョンとCSS3バージョンでお送りいたします。 投稿日2013年03月29日 更新日2013年03月29日 はじめに雲の画像を用意します。 パララックス的にした方がクールだと思ったので大きい画像と小さい画像を作成しました。 わかりやすいように背景がブルーになっていますが、実際は透過pngです。 ちなみに雲の素材はこちらの素材サイト様からお借りいたしました。 商用フリーで使える影絵素材サイト シルエットデザイン jQueryバージョン 最初はjQueryバージョンです。 画像が2つあるのでdivを2つ作成して適当なidを割り当てます。 html <div id="main-img"><div id="bg"></div></div> CSSはそれぞれのdivに作成した画像を「back
WordPressのプラグインを開発しよう（初級編）
プラグインってなんだろう。 WordPressのテンプレートをカスタマイズしてるとfunctions.phpにコードを書くことがあると思います。 基本的にこのコードをプラグインフォルダに入れるだけでプラグインになります。 そのテンプレートに依存したものはfunctions.phpに記述したままでもいいと思いますが、ある程度使い回せるものでしたらプラグイン化すると良いと思います。 簡単なプラグイン 簡単な例を見てみましょう。 functions.php に次のようなコードがあるとします。 functions.php function show_text() { echo 'おはようございます。'; } これはテンプレートファイルに「<?php show_text(); ?>」と書くと「おはようございます。」と表示するだけのコードです。 これをプラグイン化してみます。 プラグインは「wp-co
WordPressの入っていないサイトにRSSを取得してブログの情報を載せる
WordPressの入っていないサイトにRSSを取得してブログの情報を載せる サイト本体とブログを別々のドメインで運営しているけど、ブログの最新情報をサイトのトップに載せたいというが時々にあったりします。 そこでPHPでRSSを取得してWordpressの入っていないサイトでもブログの最新情報を載せる方法をご紹介します。 投稿日2011年11月16日 更新日2011年11月16日 FeedのURLの確認 最初にRSSを配信しているFeedの確認をしてみます。 例えば「http://www.example.com/」にWordpressをインストールしたならURLは下記になります。 http://www.example.com/feed SimpleXMLを使用した場合 記事のタイトル、リンク、抜粋などの基本的な情報なら、標準機能の「SimpleXML」を使用するだけなので簡単です。 適当な
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でやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」 「jQuery-URL-Parser」は現在のURLや指定したURLをパースして簡単にパラメータやディレクトリ名などを取り出せるjQueryプラグインです。 投稿日2011年07月05日 更新日2011年07月05日 プラグインのダウンロードとインクルード 「jQuery-URL-Parser」は下記URLからダウンロードできます。 jQuery-URL-Parser – GitHub jQueryプラグインですのでjQueryも忘れず読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type
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
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ページを開く
