サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
ノーベル賞
wald-grun.biz
クライアントから、最初のアクセスのときだけメールマガジン登録を促すウインドウを出したい、という要望がありました。 最初のアクセスかどうかの判断はjquery.cookie.jsを、モーダルウインドウの表示はjqModal.jsを使って実装してみました。 jQuery jquery.cookie jqModal 設置にあたっては、いくつかのブログエントリーを参考にさせていただきました。ありがとうございます。 jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法 jqModal | 設置サンプル さて、まずheadにjsファイルと必要なCSSファイルを読み込みます。 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" s
VCCWのインストール http://vccw.cc/ 上記URLからダウンロードして解凍すると、vccw-xxxx(xxxxはバージョン名)というフォルダが生成されます。 このフォルダの中身をサーバと見立て、WordPressの仮想環境を構築するイメージです。 どこか適当なフォルダにこれをまるごと格納して、設定ファイル等を書けばそれでもう使えます。なのでインストールと書いたものの、正確にはvagrantをうまく使うためのプログラムをダウンロードしてきて設定を準備する、という作業になります。 設定ファイル 以前はVagrantfileというファイルで設定していたようでフォルダ内に現在も存在するのですが、現バージョンではそれは使わずsite.ymlというファイルで設定を行います。 provisionフォルダ下のdefault.ymlというファイルを上の階層にコピーしてsite.ymlにリネー
Instagram APIの使い方。走り書き程度にメモ。 下準備 開発者ページへのログイン https://www.instagram.com/developer/register/ Developer Signupに入力して登録 Register new Client IDに進んで 情報を入力 サイトURLはhttp://から書かないと怒られる 入力に問題なければManage Clientsに進むので、情報確認 こっち側の仕組みづくり アクセストークンを取得 https://instagram.com/oauth/authorize/?client_id= CLIENT_ID &redirect_uri= REDIRECT_URI &response_type=token CLIENT_ID REDIRECT_URI をそれぞれ、取得したものに書き換えて、ブラウザに入力する。 もし
公開日: 2014年11月1日 更新日: 2015年10月14日 著者: kngsmym カテゴリー: google , Wordpress タグ: googlemap , wordpress お客様のご要望で、GoogleMapに記事をプロットしたいというご要望をいただきました。 そのやり方について、もう3年前になりますが以下の記事を書きました。 GoogleMapにWordPressの記事をプロットする方法 記事に緯度経度などの座標を値として持たせて、それを元にgooglemapにプロットする方法をまとめたものです。 こちらは、jsでAPIの呼び出しからなにからゴリゴリと自分で書く方法でした。 これ今ならもっと楽になってるんじゃないかと探してみたら、やはりプラグインがありました。 Geo Mashup 以下実装方法と、若干のカスタマイズです。 インストール 管理画面のプラグイン>新
<!-- FILTER CONTROLS --> <div class="controls"> <h3>Filter Controls</h3> <ul> <li class="filter" data-filter="all">Show All</li> <li class="filter" data-filter="category_1">Category 1</li> <li class="filter" data-filter="category_2">Category 2</li> <li class="filter" data-filter="category_3">Category 3</li> <li class="filter" data-filter="category_3 category_1">Category 1 & 3</li> </ul> </div> <!-
昨今の1ページものとかで、スクロールさせてコンテンツが表示されたら何らかのアニメーションを伴って表示されるような表現を良く見るようになりましたが、jQueryのプラグインとanimate.cssでカンタンに実装できるみたいなので、試してみたメモです。 まずは位置指定で処理を行うプラグイン プラグインは以下のものを用いました。 jQuery Waypoints 使用法をカンタンに。 ダウンロードしてヘッダなどで読み込み。
お客様のご要望で、GoogleMapに記事をプロットしたいというご要望をいただきました。 そのやり方について、もう3年前になりますが以下の記事を書きました。 GoogleMapにWordPressの記事をプロットする方法 記事に緯度経度などの座標を値として持たせて、それを元にgooglemapにプロットする方法をまとめたものです。 こちらは、jsでAPIの呼び出しからなにからゴリゴリと自分で書く方法でした。 これ今ならもっと楽になってるんじゃないかと探してみたら、やはりプラグインがありました。 Geo Mashup 以下実装方法と、若干のカスタマイズです。 インストール 管理画面のプラグイン>新規追加で「geo mashup」を検索して追加し、有効化します。 設定 有効化すると「設定」に「Geo Mashup」が現れます。 こちらで、表示する内容や、マップなどの設定を行います。 設定項
昨今の1ページものとかで、スクロールさせてコンテンツが表示されたら何らかのアニメーションを伴って表示されるような表現を良く見るようになりましたが、jQueryのプラグインとanimate.cssでカンタンに実装できるみたいなので、試してみたメモです。 まずは位置指定で処理を行うプラグイン プラグインは以下のものを用いました。 jQuery Waypoints 使用法をカンタンに。 ダウンロードしてヘッダなどで読み込み。 <script src="js/waypoints.min.js"></script> 動かしたい要素のセレクタを指定して、処理を記述 $(function(){ $('#セレクタ').waypoint(function() { 処理を記述 },{offset:'80%'}); } これで、そのセレクタのボックスが指定の位置に来たら記述した処理が実行されます。 指定位置
複数のRSSを読み込んで、時系列に並べて変えて表示するjQueryプラグインです。PHPSPOT開発日誌さんで紹介されてて便利そうだったので試してみました。 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 ダウンロードや本家デモはこちら。 jQuery Feeds Demo • jQuery Feeds 僕が設置してみたデモはこちら。 デモ 設置 基本は以下の通りです。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.feeds.min.js"></script> <script> $(function(){ $('.feed').feeds({ feeds
画面内の要素を画面遷移無しでソートやフィルタリングするjQueryプラグインを試してみましたので、忘れないうちに自分用メモです。 MixItUp まずはMixItUpというプラグインから。 MixItUp 上記URLに飛ぶとわりとこってりしたデモがありまして、リアルタイムで様々なエフェクトを試すことができます。 とりあえず簡易な機能のみで実装してみました。 簡易にしたデモ 記述は以下のとおりです。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.mixitup.min.js"></script> <script> $(function(){ $('#Grid').mixitup(); }); </script> <!-- FILT
wald-grun.biz This site is personal site of freelance web developer Profile 下山健吾/kengo Shimoyama フリーランスのマークアップエンジニア / コーダーです。 八重山諸島が大好きで、年に何度か訪れます。 >> portfolio [wantedly.com] 長崎県生まれ1993 熊本大学理学部卒業1993 大手メーカーにてSEとして勤務1995 建設コンサルタント会社に勤務2000 web制作に転身。制作会社勤務の後フリーランスとして活動開始2009 上京し、大手検索サービス会社、制作会社などに勤務後、フリーランス活動再開現在 主にフリーランスとして活動東京都練馬区在住 Facebook Mail
公開日: 2010年8月11日更新日: 2017年3月28日著者: kngsmymカテゴリー: Wordpressタグ: plugin, wordpress, WP-PageNavi, カスタマイズ, ワードプレス WordPressを使っていると恐らくお世話になる可能性が高いページネーションプラグインWP-PageNaviの設置で躓いたのでメモメモ。 内容的にはプログラマの方が読んだら「けっ」となる程度であろうこと請け合いですが、デザイナーその他にとってはこの程度のことでも重要な情報なので、世間にシェアする意味で書いてみています。 ページネーションを表示したいのは、ページの中で特定のカテゴリを任意の件数取得して表示するループ処理部分。WP-PageNaviの設置タグを配置したところ、リンクは普通に表示されるのですが、クリックしてページを遷移しても必ず1ページ目が表示されてしまうという現象
以前から一応記事の末尾にソーシャルボタンをつけているのですが、丸い画像にリンクしてあるだけなので、ただそこにあるだけで、はてブされようがシェアされようが管理者にさえわからない、という有様でした。 そして今日、とある雑誌を読んでいたところ、そこで紹介されていたオリジナルのソーシャルボタン導入が鬼のように簡単だったので、それを利用して自分のソーシャルボタンにカウントをつけてみようと思い立ち、導入してみました。 ※こちら、twitterに関しては非推奨の使い方だそうです。使用にあたっては自己責任で。 jquery.popn-socialbutton ソースは上記よりダウンロードできます。サンプルファイルも同梱されているので、それを元に導入、カスタマイズを行いました。 導入は簡単です。 まずヘッダで呼びます。 <script src="//ajax.googleapis.com/ajax/lib
アイコンフォントとは、一応書いておくとアイコンをフォントデータ化して、サイトのアイコンをウェブフォントで表示するやり方及びそのフォントのこと、と理解しています。 まずはアイコンデータが含まれるウェブフォントを用意する必要があります。本来はそのデータを作成するところからなのですが、アイコンを選択してフォントデータにして利用できるウェブサービスがいくつかあるので、それを利用しました。 今回利用したのは以下のサイトです。(日々チェックしているphpspot開発日誌さんで紹介されていました。) Create Your Icon Fonts – Free icon Vectors – Fontastic こちら、アクセスしてメールアドレスとパスワードを登録すると、すぐにアイコン選択画面が表示されます。 アイコンの作者ごとに一覧で表示されており、各アイコン群の右上(赤枠)にライセンスについて書いてあり
公開日: 2011年9月3日更新日: 2017年3月28日著者: kngsmymカテゴリー: Wordpressタグ: wordpress, ウィジェット, マルチブログ, ワードプレス ハマリました。そして、なんとか解決しました。 ちなみにバージョンはWordpress3.1です。結果としてバグっぽくて、最新バージョンだとフィックスされてるのかもしれませんが、サーバのphpのバージョンなどの問題で3.1を使う機会はまだあるのかもしれないと思うので、ひょっとして誰かに役立つかと思って、情報シェアの意味でメモしておきます。 今担当している案件で、マルチサイト化して親ブログのウィジェットを子ブログで共用する、という仕様を実現しようとしたのですが、子サイトで親サイトのウィジェットが表示されなくて困りました。ソースを追うほどのスキルもないのでとりあえずDBガン見していたところ、なんとか解決しました
カスタム分類ごとにテーマ画像を使用したいという場面がありました。 カテゴリごとに特定のテーマ画像を使用したい場合、通常ならCategory Iconsなどのプラグインで実現可能ですが、カスタム分類には対応していないようでしたので、その他カスタマイズで対応できる方法はないかとググったところ、以下の記事を見つけました。 WordPressのカテゴリーにカスタムフィールドを追加する 記事の内容は通常のカテゴリに対してのTIPSなのですが、カスタム分類への対応はフックを書き換えればよい、との注釈が付いていたので、カスタム分類に適用してみました。 上記サイトのソースを元に、カスタムタクソノミー用に書き直したものが以下です。 <?php add_action ( 'タクソノミー名_edit_form_fields', 'extra_taxonomy_fields'); function extra_t
GoogleMapAPIがV3になりまして、任意に地図上にプロットするのが少し簡単になった?気がします。wordpressのエントリーに緯度経度をカスタムフィールドとして持たせて、それをプロットするというのを試してみたので、メモ。 以下、実際に使ったコード(から、ある程度値を変えたもの)です。 あ。あらかじめ記事のほうで「Lat_Long」という名称でカスタムフィールドの緯度経度を持たせている前提です。 ※プラグイン等で簡単に設定できます。 WordPress(ワードプレス)の投稿画面で簡単にGoogleMapを挿入するプラグイン(Google Maps Anywhere) //マップを表示するための空div <div id="map_canvas" style="width:680px;height:300px"></div> //api呼び出し <script type="text/j
管理画面の左メニューのカスタマイズについて調べていたら、見やすいページがあったのでメモ。 Customizing Your WordPress Admin 英語ですが、タイトル部分は理解できるので、あとはソースを見れば使えます。functions.phpにペタっと貼って、自分用に詳細を書き直すだけでOKです。 Renaming Menus 左メニューに元からあるメニューの名称を変更できます。 function edit_admin_menus() { global $menu; global $submenu; $menu[5][0] = 'その他'; // '投稿'を'その他'に変更 $submenu['edit.php'][5][0] = '投稿一覧'を'その他一覧'へ変更; } add_action( 'admin_menu', 'edit_admin_menus' ); $menu
先日、WordPressで構築したサイトに、後付けで別途作成した階層構造を持つHTMLコンテンツを追加する機会がありまして、ページで登録して親子関係を持たせることでうまく組み込むことができましたので、簡単にメモ。 意図通りにするにはあらかじめ必要な条件と設定がありますので、以下に簡単にまとめます。 パーマリンクの設定 WordPressはそもそもフォルダという概念がありませんので、元々階層を持つHTMLのリンク構造とうまく整合を取るには、パーマリンク設定をあたかもフォルダがあるかのようなURLが生成されるように調整する必要があります。今回はカスタム構造を選択して以下のように記述しました。
公開日: 2011年7月29日更新日: 2017年3月28日著者: kngsmymカテゴリー: Javascript, jQueryタグ: Javascript, スマートフォン, 傾き スマホ対応にて、傾きを検知するjsのメモ。 ブログを、PC版と共通の記事を使ってスマホ対応とする場合、viewpointに値を書いてリキッド対応でコーディングしておけばうまいこと表示されるはずなのですが、画像や動画まわりで、jsで動的に値を指定していたり、iframeで貼っていたりなんかのときに、機種により少々解釈が微妙だったり、なんてことがありました。 そこで、縦横を取得して動的に値を書きなおす処理をねじ込むときの自分的メモです。以下ぶっきらぼう気味に。 記述はこちらを参考にさせてもらいました。 現在の傾き具合の取得 傾きは、window.orientationと記述することで取得 返り値は0,90,-
wordpressのメールフォームプラグインであるTrust Formがなかなか使いやすそうなので自分用メモ。 DL先 WP公式リポジトリ Trust Form 公式サイト? ※開発者さんのブログだと思うのですが、違ったらすみません。 設置方法 管理画面のプラグインから、新規追加でインストール可能です。またはリンク先からDLして、FTPでアップロードします。 有効化したら左メニューにTrust Formの項目が出来ていますので、管理画面を開いて設定します。 ドラッグアンドドロップで直感的に操作できます。左の設置できるフォーム一覧から右の設定エリアにドラッグしてドロップ すると、フォームになります。 それぞれの項目をクリックすると編集モードに切り替わり、項目名や、入力エリアのサイズ、必須にするか否か、バリデーションなどについて設定できます。 編集画面のタブに「確認画面」「完了画面」とあるとお
ウェブサイトを印刷して使ってもらおうというお客様のご要望は案外多いと思います。でもブラウザの機能を使ってそのまま印刷するとヘッダやフッタが印刷されたり、ずれたり、背景画像が出たり出なかったりするため、印刷用CSSを設定して対応することも多いですよね。 WordPressには、そういった印刷用途に特化したページを自動的に生成してくれるプラグインが存在します。以下、その導入方法と機能のご紹介です。 ダウンロード・設置 WP-Print 上記ページからダウンロード、解凍、アップロードまではいつもの手順ですね。もしくは管理画面のプラグインページの新規追加から、『WP-Print』で検索すれば一番上に出てきますので、そこから簡単にインストールできます。 有効化した後、パーマリンクの設定を更新します。パーマリンクの更新は、特に変更は無くても更新ボタンを押すだけでOKです。というかやらないと正常に動作し
案件でオリジナルなスクロールバーを設置する必要があり、色々と調べてみるとjScrollPaneが便利そうです。実装のやり方をググってみたところ、サンプルはあるもののなかなか設置の仕方まで解説しているところはありませんでした。しょうがないので自分でまとめてみることにしました。パンが無いならケーキを食べればいいじゃない的なノリで。違うか。 以下が公式サイトです。 http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html 最低限+一般的に必要なファイルは以下の通りです。 * jQuery * the mouse wheel plugin * the jQEm plugin * jScrollPane.js * jScrollPane.css これらをダウンロードし、任意のフォルダに配置します。 ※jqueryについて
wordpressにformを追加するプラグインといえばContactForm7が有名ですが、こちら、確認画面がついていないことも同じくらい有名ですね。このプラグイン、使い勝手は最高なので、確認画面をつける方法は無いのかしらとネットをふらふらしていたら、jQueryで擬似的に確認画面(というより確認フェーズ)を間に挟むスクリプトを書いてくださっている方がいらっしゃいました。 ※2012/08/02追記 確認画面があるメールフォームとしてTrustFormを試してみました。 Contact Form 7に確認フェーズを 「使用に際しては自己責任で」とのことでしたので、とりあえず自分のブログで使ってみようということで、このブログに設置してみました。 問い合わせフォーム設置サンプル ※(実際に僕宛に送れてしまうので、ご注意くださいませ。や、うっかり送っていただいても問題は全くありませんが) 使用
公開日: 2010年11月13日更新日: 2017年3月28日著者: kngsmymカテゴリー: Wordpressタグ: functions.php, wordpress, カスタマイズ, ワードプレス 以前、functions.phpを使ってWordpress管理画面にカスタムフィールドを追加するやり方を書いたのですが、前回は流れとソースをざっくり書いただけでしたので今回はそのやり方をもう少し詳しく整理してみたいと思います。 今回は単純なHTMLを普通に追加する手順をきちんと記します。 ぶっちゃけ、今日同じような作業をやろうとした際「以前書いたから自分のエントリーを見よう」と思って以前のエントリーを見てみたら、自分でも微妙にわからず結局CODEXを参照するはめになったので、ちゃんと書こう!と思った次第です。ええ、大変申し訳ありません。手を抜いていたようです。そのときの自分。 さて、管理
公開日: 2010年8月20日更新日: 2017年3月28日著者: kngsmymカテゴリー: Wordpressタグ: php, wordpress, カスタマイズ, ワードプレス とある案件にて、どんどんプログラマの領域に踏み込んで帰れなくなってしまいました。 僕の肩書きは一応ディレクター。ベースはデザイナーです。 だから、どこかで自重するべきだったとは思うのですが、 やっちゃったのはしょうがない。うん、しょうがないよ。 さてお題はWordPressと既存の予約システムの連携。 予約システム側の値を読み込んで、カスタムフィールドとしてドロップダウンリストを生成しました。※今回は読み込んでドロップダウン化する部分は割愛 デザイナーなんだけど色々やっててちょっとだけプログラム部分も触らなきゃ。なんていうふわふわなポジションの人に贈りたいメモ。 以下、その手順。 管理画面に自分で作ったHTM
先日、以下のようなエントリーを書いたのですが、 jQueryでページ遷移時にフェードインフェードアウトの効果をつける いくつか気になる点がありましたので補足記事です。 IEでfadedIn、fadeOutが効かない事がある こちら、ちょっと挙動が変になってしまいます。ちなみにIE全般(10は未検証)です。 背景画像だけがフェードアウトしたりとかで、テキストが全く消えなかったりします。 色々とググってみると参考記事は多々で、原因と対策は色々、さすがIEの面目躍如って感じです。ちっ IE8 で jQuery の slideDown() と fadeIn() が効かないことがある件 ですとか メイリオを指定したIE7・8でopacity不具合 ですとか。で、僕の場合は以下が参考になりました。 jQueryのopacityアニメとIE6,7,8 IEの場合、フェードイン、アウトの対象としたい要素に
次のページ
このページを最初にブックマークしてみませんか?
『wald-grun.biz | This site is personal site of freelance web developer』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く