サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
Switch 2
kwski.net
「leanModal」は、シンプルにモーダルウィンドウを設置できるjQueryプラグインです。オプションは少なめですが、複雑な機能は必要なく単に設置したいという場合にはもってこいのライブラリだと思います。デモ スクリプト <script src="jquery.min.js" type="text/javascript"> <script src="jquery.leanModal.min.js" type="text/javascript"> <a rel="leanModal" href="#div787">Edit</a> <div id="div787"><<モーダルウィンドウ内に表示する要素>></div> <script type="text/javascript"> $(function() { $( 'a[rel*=leanModal]').leanModal({ top:
RSSフィードのカスタマイズ 標準で出力されるフィード WordPressの各種ページで出力されるフィードは以下になると思います。 投稿：投稿のフィード @全てのページ サイトのコメント：コメントのフィード @全てのページ 各投稿のコメント：投稿ページのコメントのフィード @シングルページ カテゴリー：カテゴリーごとのフィード @カテゴリーアーカイブページ タグ：タグごとのフィード @タグアーカイブページ 投稿者(作成者)：作成者ごとのフィード @作成者アーカイブページ 検索結果：検索結果のフィード @検索結果ページ 管理画面で可能な設定 管理画面「設定」→「表示設定」で以下の設定を行うことができます。 RSS/Atom フィードで表示する最新の投稿数：RSS登録した際に最新から何件表示するか RSS/Atom フィードでの各投稿の表示：フィードに、「全文」を表示するか「抜粋のみ」を表示す
<2014-06-16> Bootstrap3版にサンプルを変更 <2013-03-03> オリジナルのものがforkされて、より機能が追加されているようです。IE8対応化 & 日付選択用の表示カレンダーを日本語に変換できるようになっています。 スクリプト <link href="css/datepicker.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"> <script src="js/bootstrap-datepicker.js" type="text/javascript"> <!-- 日本語対応用スクリプト --> <script src="js/locales/bootstrap-datepicker.ja.js" type="text/java
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト <link href= "mosaic.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="mosaic.1.0.1.min.js" type="text/javascript"></script> 実装 <div class="mosaic-block bar3"> <a class="mosaic-overlay" href="#"><div class="details">キャプション</div></a> <a clas
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイプ も設定で可能となっており、タッチフレンドリーなプラグインになっています。 サイト ダウンロード スクリプト <link href="jquery.fs.boxer.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.fs.boxer.js" type="text/javascript"></script> 実装 それぞれのリンクに対してclass("boxer")を指定します。 ギャラリーとして表示したい場
WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止する 管理画面より「設定」→「ディスカッション」とすすみ、"新しい投稿へのコメントを許可する"のチェックをはずす。 これで、これから投稿するページのコメントは停止されますが、説明("これらの設定は各投稿の設定が優先されます。")にあるように、既に投稿しているページのコメントは有効です。 既存の投稿に関してコメントを停止する 管理画面より「投稿」→「投稿一覧」とすすみ、そのページの投稿画面へすすんで下さい。右上の「表示オプション」を開き、"ディスカッション"と"コメント"にチェックを入れると要素が追加されるので、"コメントの投稿を許可する。"のチェックをはずして下さい。 これでその投稿に対するコメントは
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="imgLiquid-min.js" type="text/javascript"> 実装 <!-- thumbnail( 300x200 ) --> <div class="div1077" style="width:300px; height:200px;"><img src="画像"></div> <!-- thumbnail( 150x100 ) --> <div class="div1077" style="width:150px; height:100px;"><img src="画像"><
ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手法をもちいているらしいです。 =>「ユーザー名」をある程度絞ってから、あとはパスワードは総当たりでトライ その逆でパスワード固定のユーザ名総当たりは「リバース・ブルートフォース」というらしい。 ほとんどのテーマではユーザ名が投稿記事内に晒されている と思います。 テーマによりますが、記事の「メタ情報」内に投稿者・作成者といったかたちで、「ユーザー名」が出力されます。 ＊＊出力する必要が無い場合はテーマのテンプレートを変更して、作成者を非表示にしましょう。class="author"が設定されているはずです。 (Twenty twelveの場合はこちら) cssで隠すだけでは、HTMLには出力さ
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたりして確認してみてください。) TablePress実装 1. 管理画面のTablePressのページから「新しく追加」でテーブルを作成し、以下を設定します。テーブルのヘッダー(フッター、両方)を使用する場合は、必要な行数分プラスしといて下さい。 テーブルの名前：説明 (省略可)：行数：列数： 2. 「テーブルを追加」すると以下の画面に移るので、テーブルの値を入力を入力して下さい。 「テーブルの最初の行はテーブル見出しです。」にチェックを入れると最初の行はテーブルのヘッダーとして使用されます。フッタに設置する場合は、「テーブルの最終行は、テーブル フッターです。」にチェック 「検索/フィルター」を
WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみました。 CSSファイルを読み込む方法 CSSを読み込むには、以下の関数を使用します。 wp_enqueue_style ★例として、子テーマフォルダ下に配置したBootstrapのCSSファイルを読み込ませる functions.php(子テーマ)に追加して下さい。 // wp-config/theme/[子テーマ名]/functions.php function my_styles() { wp_enqueue_style( 'bootstrap', get_bloginfo( 'stylesheet_directory') . '/bootstrap.min.css', array(), n
「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jtruncate.js" type="text/javascript"></script> 実装 対象の要素にidもしくはclassを指定して、オプションを設定します。 <div id="div627">折りたたみする文章</div> <script type="text/javascript"> $().ready(function() { $('#div627').jTruncate({ length: 200, // 表示す
Galleriaは、わずか数行で画像ギャラリーが作成できるjQueryプラグインです。Airbnbのページで使用されていて、コレいいな～と思い試してみました。 ダウンロードはこちらから(バージョン:1.4.2) CDNを使用する場合はこちらから使用できます。(cdnjs) スクリプト <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="galleria-1.4.2.min.js"></script> 画像表示は通常通りでid('#gallery')を付与する <div id="gallery"> <img alt="海員閣" src="5080/6914709574_defcfa39d1_n.jpg"> <img alt="中華街" src="546
コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズを行います。 目次(コメントフォーム) 「ウェブサイト」フィールドを除外する コメントフォーム部分を変更する コメントフォーム内の注意書きを変更する 目次 (コメントリスト) 管理画面から設定できる項目 コメント投稿者にリンクを付与しない 自動リンクを無効化する コメントの投稿日付・時間を削除 コメントフォームのカスタマイズ 「名前」「メールアドレス」「ウェブサイト」フィールドを除外する コメントフォームには、デフォルトでは"名前(Name)"、"メールアドレス(Email)"、"ウェブサイト(Website)"が用意されています。 "ウェブサイト"にurlを入れて投稿された場合はコメント投稿
以前1.3版で投稿した「ユーザ登録」処理の2.x版を作成しました。フローは同じで以下のようにします。 1. メールアドレス・パスワードでユーザ登録 2. この時点では仮登録として、本登録用のURLリンクをメールで送付 3. 送付されたリンクをクリックして「本登録完了(activate)」とする ユーザ(users) テーブル statusを用意し、デフォルトを1としています。"1"を仮登録状態でログイン不可、"0"を本登録としログイン可能にします。その制御は、「scope」が使えそうです。 -- usersテーブル CREATE TABLE IF NOT EXISTS `users` ( `id` INT NOT NULL AUTO_INCREMENT , `username` VARCHAR(255) NOT NULL , `password` CHAR(128) NOT NULL ,
「FooTable」は、画面の大きさに合わせて表示をかえてくれるテーブルを実装できるjQueryプラグインです。かなり、シンプルに実装できます。ダウンロード Footable (v2) レスポンシブ対応テーブル ソート フィルタ ページネーション など スクリプト <link href= "css/footable.core.min.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="js/footable.js" type="text/javascript"></script> スタイルのテーマが用意されています。standaloneもしくはmetroをインクルードして下さい。 <!-- テーマスタイル --> <l
商用利用フリー(投稿時)のlightbox用プラグインをまとめてみました。最新のライセンスに関しては各サイトに確認をお願いいたします。) lightboxの中にもギャラリー表示が可能なもの、ギャラリー内にサムネイルを設置できナビゲーションできるものなどがあります。また、最近のものは、モバイルに最適化されておりレスポンシブ対応はもちろん(タッチ)スワイプも可能なものが増えてきました。 Lightboxなどが実装できるプラグイン「Magnific Popup」 Lightboxプラグイン「Boxer」
以前、google Maps上にマーカー(と吹き出し)を表示するサンプルを作成しましたが(記事)、密集していると見づらい場合がありますよね。そこで、MarkerClustererという密集したマーカーを件数をカウントしてまとめてくれるライブラリを使用してみました。 ダウンロード ライブラリは、ここにあります。[markerclusterer_compiled.js] スクリプト <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="markerclusterer_compiled.js"></script> Googleマップ用のライブラリとmarkerclustererのライブラリを
「jQuery Text Resizer Plugin」は、ページ内のフォントサイズを変更してくれるjQueryプラグインです。要素を限定してリサイズすることも可能です。jquery.cookie.jsを使用して設定はCookieに保持され、次回訪問時にも設定が引き継がれて表示してくれます。デモ スクリプト <script src="jquery.js" type="text/javascript"></script> <script src="jquery.cookie.js" type="text/javascript"></script> <script src="jquery.textresizer.js" type="text/javascript"></script> 実装 // リサイズ用リンクボタン <div id="textsizer"> <p>文字サイズ:<p> <ul
CakePHP 2になって追加されたクラスCakeEmailがシンプルに使えます。これを使用してメール送信を行う処理を実装してみました。 CakeEmailクラスの読み込み /app/Config/bootstrap.php(全体的に使用する場合)もしくは各々の(使用する)コントロールに定義します。 App::uses( 'CakeEmail', 'Network/Email'); CakeEmailの設定 database.phpと同様、/app/Config下に設定ファイルが用意されています(email.php.default)ので、email.phpにリネームして下さい。そこに使用するメールサーバの設定を行います。以下はGmailからの送信設定を追加しています。 // /app/Config/email.php class EmailConfig { public $default
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなやつです。自作しようと思ったのですが、あまりにもシンプルだったため、これを使用することにしました。ダウンロード スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.periodicalupdater.js" type="text/javascript"></script> 実装 <div id="div1022"></div> <script type="text/javascript"> $(document).ready(function(){ $.PeriodicalU
「PopBox」は、シンプルにポップアップを実装できるjQueryプラグインです。 スクリプト <link href="css/popbox.css" type="text/css" rel="stylesheet"> <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/popbox.js" type="text/javascript"></script> HTML <div class='popbox'> <a class='open' href='#'>Click Here!</a> <div class='collapse'> <!-- ポップアップ全体 --> <div class='box'> <!-- ポップアップ --> <div class='arrow'></div
Calendarioは、レスポンシブデザインにも対応したカレンダ表示プラグインです。 ダウンロード スクリプト <link href="/css/calendar.css" type="text/css" rel="stylesheet"> <script src="/js/jquery.calendario.js" type="text/javascript"></script> 実装 <div id="calendar" class="fc-calendar-container"></div> <script type="text/javascript"> $(document).ready(function() { $('#calendar').calendario({ caldata : codropsEvents // 表示データ }); }); </script> // 表示デ
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増ししてくれます。 ダウンロード CDN スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.autosize.js" type="text/javascript"></script> 実装 <textarea id="text1018"></textarea> <script type="text/javascript"> $(document).ready(function(){ $('textarea').autosize({ // append: "\n" // 内部に
カレンダーアプリケーションを作成するため、カレンダー表示できるプラグインを探索して出会ったFullcalendarを試してみました。シンプルに使用できる上に、オプションがかなり豊富です。ダウンロード 目次 カレンダーを表示する カレンダーにイベントを表示する カレンダーにイベントを追加する カレンダーを表示する まずはカレンダーのみ表示してみます。デモ：カレンダー表示 head部分に、jQuery本体とFullCalendar本体、そしてCSSを読み込みます。 // head内 <?php echo $this->Html->css( 'fullcalendar/fullcalendar.css'); echo $this->Html->script( 'jquery.min.js'); echo $this->Html->script( 'fullcalendar/fullcalenda
CakePHPは基本的にはディレクトリそのまま配置することで構築が可能ではありますが、設定パスを変更することでセキュリティに考慮した構成にすることや運用性をもたせたものにすることが可能になります。 webroot/index.phpで設定する基本パス ROOT -- アプリケーションのディレクトリパス APP_DIR -- アプリケーションのディレクトリ名 CAKE_CORE_INCLUDE_PATH -- Cakeライブラリへのパス WEBROOT_DIR -- webrootディレクトリ名 WWW_ROOT -- webrootディレクトリ絶対パス DS -- PHPのDIRECTORY_SEPARATORの短縮系。Windowsの場合は\ (バックスラッシュ)、 Linuxの場合は/ (フォーワードスラッシュ) ここで、「CAKE_CORE_INCLUDE_PATH」を変更することで
CakePHP 2.xではbootstrap.php内にあらかじめアプリケーションログの設定が書かれています。2.xで日付ごとにログファイルが切り替わるよう設定してみました。 日ごとにログを切り替える設定 app/Config/bootstrap.phpを以下のように変更もしくは追加して下さい。 // app/Config/bootstrap.php[変更or追加 後] /** * Configures default file logging options */ App::uses( 'CakeLog', 'Log'); CakeLog::config( 'debug', array( 'engine' => 'FileLog', 'types' => array( 'notice', 'info', 'debug'), 'file' => date( 'Ymd') . '_' . '
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ページの記事タイトル(entry-title)を非表示にしたいというときに以下使えると思います。 CSSで非表示 それぞれのcssクラス設定は、以下を条件としています。なので、テーマによっては、固定ページ・投稿ページ・個別記事と特定方法を探し出す必要があります。 投稿タイトルのclassは「entry-title」 投稿全体部分にpost_class()でclassを出力 例： <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> 固定ページでは.page、投稿ページでは.post、個別ページではpost-[id]となります。 sty
CakePHPでは、saveメソッドの際にバリデーション処理も自動で行われますが、save処理と切り離してバリデーションを行うこともできます。このときは、save時と若干異なる処理体系になります。 バリデーションをsaveから切り出して行う ポイントは、1.のvalidatesの前にデータ($this->request->data)をdataをModelにsetする必要があるところです。(「若干異なる処理体系」とはここのことです。)この処理を行わないとvalidatesは常にtrueを返します。 validatesメソッド内で、invalidFieldsメソッドが呼び出されます。このメソッドは[Model]->validationErrorsにバリデーションのエラーメッセージ(message)を格納します。バリデーションNGの場合、ここからメッセージの取り出しが可能です。 // 1. モデ
WordPressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索してみてください。 バージョン番号を消すことは、セキュリティ的な観点から本当に意味があるのかどうかは議論が分かれるところですが(どうせ中身に書いてあるし...バージョンなんか見ずに無差別爆撃が最近でしょうから)、余計なものはできるだけ出力しないほうがいいと考え消すことにしました。このブログで挙動に関してある一定期間様子をみて他のブログに適用していこうと思います。 方法は、以下のサイトを参考にさせてもらいました。(Thank you!) How to remove WordPress version parameter from JS and CSS files どちらか選択して、functions
次のページ
このページを最初にブックマークしてみませんか？
『Think deeply, Do less, More effective』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
