CoffeeScriptでjQuery使うときのメモ
CoffeeScriptでjQuery使うときのメモ CoffeeScriptでjQuery使おうと思ったらいろいろと戸惑ってしまったのでメモです。 投稿日2012年11月19日 更新日2012年12月24日 とりあえずCoffeeScriptでjQuery使えるようにする JSでjQueryのコードを書き始めるとき「$(document).ready」を省略した形で下記のように書くことが多いと思います。 JavaScript $(function() { // jQueryスクリプト }); これをCoffeeScriptにするとこうなります。 CoffeeScript $ -> # jQueryスクリプト これでjQueryがいつものように使用できますので、あとはさくさく書けると思います。 試しに「p」のテキストカラーを赤にしてみます。 CoffeeScript $ -> $('p')
WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」
WordPressのカスタムフィールド・カスタム投稿タイプ・カスタム分類をまとめて管理するプラグイン「Types」 一つのプラグインでカスタムフィールド・カスタム投稿タイプ・カスタム分類を管理できる、「Types」をご紹介いたします。 投稿日2013年01月09日 更新日2013年01月09日 カスタム投稿タイプの作成 プラグインをインストールするとメニューに「Types」という欄が作成されます。 カスタム投稿タイプを作成する場合「Custom Post Types及びTaxonomy」というメニューを選択します。 「Custom Post Type追加」「Custom Taxonomy追加」というボタンが表示されますので、カスタム投稿タイプを追加する場合は「Custom Post Type追加」を選択します。 「新規Custom Post Typeを追加」画面が表示されます。 カスタム投
WordPressのサイト内検索の検索条件をカスタマイズする
※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」を作成して適当にループさせれば検索結果が表示されます。 投稿記事だけ検索したい 標準のサイト内検索は固定ページも検索範囲に含まれて
WordPressのカテゴリーにカスタムフィールドを追加する
WordPressのカテゴリーにカスタムフィールドを追加する カテゴリーごとに独自の画像やテキストを表示させたい場合、テンプレートで条件分岐を使用すれば簡単ですが、それだとカテゴリーが増える度にテンプレートを編集しなくてはいけないので不便ですね。 ここではカテゴリー編集画面にカスタムフィールドを追加して、管理画面で画像や新たなテキストを追加できるようにしてみます。 投稿日2011年08月18日 更新日2012年08月07日 カテゴリー編集に項目を追加 さっそくですがカテゴリー編集画面に項目を追加してみましょう。 現在使用している「functions.php」に以下を追加します。 functions.php add_action ( 'edit_category_form_fields', 'extra_category_fields'); function extra_category_f
WordPressの自動挿入されるp,brタグをプラグインを使用しないで削除する
WordPressの自動挿入されるp,brタグをプラグインを使用しないで削除する Wordpressのthe_contentタグを使用して記事を表示するとpタグやbrタグが自動で挿入されますね。 また自動挿入するだけじゃなくてbrが２重になってたりするとpタグに変換してくれたり、削除してくれたりもしてくれます。 正しい構文にしてくれるので便利ではあるのですが、ときには不便になこともありますよね。 ということでこの便利な機能をfunctionsファイルを修正して無効にする方法をご紹介します。 投稿日2010年10月05日 更新日2011年04月03日 現在のテーマのfunctions.phpを修正する。 使用しているテーマフォルダにあるfunctions.phpを開きます。ない場合は作成しましょう。 追加するコードは下記の一行だけです。 functions.php remove_filter
WordPressのビジュアルエディタをカスタマイズする
WordPressのビジュアルエディタをカスタマイズする Wordpressのビジュアルエディタは基本的にデフォルトのままでも問題ないかと思いますが、不便なところもありますよね。 この記事ではfunctions.phpを編集してビジュアルエディタをカスタマイズしてみます。 TinyMCE Advancedとかプラグイン入れた方がはやくね？ とか言ってはいけない！ 投稿日2010年12月17日 更新日2015年01月08日 オリジナルのスタイルを適用する。 ビジュアルエディタはそのままだとテンプレートとスタイルが違うので、最終的なイメージがつかみにくいですよね。 テンプレートと同じスタイルを適用して、ある程度イメージの確認ができるようにしてみましょう。 現在使用しているテンプレートフォルダの「functions.php」に以下を記述します。なければ作成しましょう。 functions.php
WordPressのカスタム投稿タイプを関連付けするプラグイン「Relation Post Types」
WordPressのカスタム投稿タイプを関連付けするプラグイン「Relation Post Types」 Wordpressのカスタム投稿タイプの関連付けできるプラグイン「Relation Post Types」をご紹介します。 このプラグインはカスタム投稿タイプの他にも、固定ページや通常投稿の関連付けを行うこともできます。 投稿日2011年10月20日 更新日2011年10月20日 プラグインのダウンロード プラグイン本体を下記URLからダウンロードして、有効にします。 WordPress › Relations Post Types 現時点で最新のバージョンである1.2.1を使用します。 Wordpressのバージョンは3.2.1です。 店舗と商品の関係とか たとえば店舗と商品をカスタム投稿タイプを設定してこれらを関連付けしてみたいと思います。 そういう場合は店舗をカスタム分類を使用し
css+jQueryでチェックボックス&ラジオボックスをオリジナルデザインのボタンにする
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
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
jQueryでマウスホイールで横にスクロールする横型コンテンツ
jQueryでマウスホイールで横にスクロールする横型コンテンツ 通常のWebサイトは縦長でマウスホイールで下に移動していきますが、最近よく見かけるようになった横長タイプのコンテンツをjQueryを使用して作成する方法をご紹介します。 機能としてはマウスホイールで横に移動と、ナビゲーションボタンをクリックで指定位置までスライドするということをやってみます。 投稿日2011年07月21日 更新日2011年07月21日 html+css htmlはナビゲーションであるリストとコンテンツを入れるためのdivが５つあります。 html <div id="contents"> <ul id="nav"> <li><a href="#s01">01</a></li> <li><a href="#s02">02</a></li> <li><a href="#s03">03</a></li> <li><a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
