今回は、スマホのドロップダウンメニューの実装などに大変便利なjQueryプラグイン【SlickNav】の使い方のご紹介です。 実際に利用してみたら、とても便利でしたのでご紹介させて頂きます。 こちらのプラグインのとても便利な所が、既存のメニュー(ul要素でマークアップしている必要があります)をそのままコピーしてくれてモバイル用のスタイルで表示させてくれるんです。 なので、これからレスポンシブ化をするサイトなんかにこちらのjqueryプラグイン【SlickNav】利用したらとても作業も楽なんじゃないかなーと思います。 また、jQuery UIを読み込むとメニューをオープンとクローズ時のアニメーションをeasingのアニメーションを利用出来るようになっています。 レスポンシブに対応していますので、スマホのメニューだけではなく、ある要素をモバイルで、スペースを節約したい時に、こちらの【Slick

ホーム› BLOG› WordPress› プラグイン› WordPress コメントフォームに星の評価機能を追加出来るプラグイン Comment Rating Field Plugin 使い方 今回は、WordPressのコメントフォームに星5段階評価機能追加出来るプラグイン【Comment Rating Field Plugin】のご紹介です。 こちらのプラグインを有効化すると下記画像のように、コメントフォーム・コメント欄に星の評価機能が追加されます。 実装もとても簡単で、設定ページでセッティングするだけで実装が出来ます。 ただ残念なことに、【無料版】では限られたことしか出来ません。 僕的には、無料版で十分と思いますwww WPでネットショップや星付きの評価機能が必要なサイトにはとても便利なプラグインでは無いでしょうか？ プラグインのインストール・有効化 それでは、【Comment R

ホーム› BLOG› WordPress› プラグイン› 高機能でいてレスポンシブにも対応 WordPressスライダープラグイン【Meta Slider】使い方 WordPressのスライダープラグインは、数多くありますが、今回ご紹介するのは、その中でもとても人気で初心者にも使いやすい【Meta Slider】です。 Meta Slider(無料版)は、jQueryスライダーの【Nivo Slider】【Coin Slider】【Flex Slider 2】【Responsive Slides】の4つのスライダーが利用できる高機能プラグインです。 また、Flex Sliderなどはレスポンシブにも対応していますので、多彩なデバイスにも対応出来るようになっていますので、現在ご利用のWordPressテーマがレスポンシブの場合はとても相性が良いプラグインです。 スライダーの画像やオプションは

今回は、任意のページのスクリーンショットをショートコードで表示する方法のご紹介です。 WordPressには、Browser Shotsというスクリーンショットをショートコードで表示させるプラグインがあるのですが、こちらを利用してもいいと思いますが、スクリーンショットの為だけにプラグイン1つ導入するのもどうかな～と思いましたので、こちらの自作のショートコードをご紹介したいと思います。 最終的にやっていることは、同じですが、プラグインを利用するか、それともご自身でfunctions.phpにショートコードを登録して利用するかの違いです。 今回ご紹介するショートコードを利用すれば、下記のようにリンク付きでスクリーンショットとタイトルも表示します。画像のサイズも変更可能です。 ショートコードやCSSのスタイルも含めコピペで簡単に導入可能です。 上記のショートコードは、下記のようになります [sc

今回は、レスポンシブに対応した、水平スライドアウトメニューの実装方法のご紹介です。 こちらのスライドメニューは、レスポンシブにも対応していますので、レスポンシブメニューの一つとしてストックしておいてもいいかもしれません。 また、メニューの初期デザインが素晴らしく、様々なサイトのメニューデザインとして使用出来ると思います。 僕なら、ネットショップのメニューやWordPressでアイキャッチ画像も表示させてカテゴリー毎の新着記事順なんかのメニューでもいいですし、ギャラリー系のメニューでもいいかもしれません。 色々ありすぎて迷いますけどwww、使い方次第では面白いスライドメニューだと思います。 下記にデモサイトもありますので、ご参考にどうぞ デモサイト 実装に必要なファイルなどは、下記リンク先よりダウンロードして下さい。 HORIZONTAL SLIDE OUT MENU レスポンシブに対応した

今回は、WordPressのRSSに記事のアイキャッチ画像も表示させる方法のご紹介です。 すでに皆さんご存知だとは思いますが、自分の備忘録として残しときます。 また、アイキャッチ画像も表示させたけど、RSSが全文表示になって管理画面の表示設定から抜粋のみ表示にチェックをしても全文表示になるという経験をされた方もいるとは思います(僕もその内の一人ですwww)ので、そちらの対策も一緒に書いています。 RSSに記事のアイキャッチ画像も表示する方法 RSSに記事のアイキャッチ画像を表示する場合は、下記コードをfunctions.phpに貼り付けてください。 /*-------------------------------------------*/ /* RSSに記事のサムネイルを表示 /*-------------------------------------------*/ functio

今回は、WordPressのログイン画面を簡単にカスタマイズ出来るプラグイン【Custom Login】のご紹介です。 こちらのプラグインは、管理画面の設定画面から簡単にログイン画面の背景・ロゴ・フォーム周りをカスマイズ出来ます。 プラグインを使わなくても、functions.phpでlogin_headにフックさせてlogin.cssなんかを読み込ませてご自身でカスタマイズも出来ますが、知識がある方は難しい作業ではないですが、そうではない方にとっては難しい作業だと思います。 ですが、こちらのプラグインを利用すれば、簡単に背景画像を変更したり、ロゴ画像も変更が出来ます。 利用方法 それでは、利用方法をインストールから順に説明していきます。 Custom Loginのインストール まずは、Custom Loginをインストールして有効化します。 WordPressの管理画面よりプラグイン >

今回は、軽量のjQueryツールチッププラグインの使い方のご紹介です。 こちらのjQueryプラグインは、実装も簡単な上に軽量なツールチッププラグインとなっております。 最近では、よくツールチップがアイコンフォントなんかに使われているのを見ます。 ちょっとした文字をマウスホバーで表示させるのは、レイアウト/デザインの保持やスペースの節約になると思います。 また、以前にツールチップの記事を書きましたが、以前書いたツールチップは、マウスの動きに合わせてツールチップも表示されますが、こちらのツールチッププラグイン【Tipso】は、ご自身で上・右・下・左など指定した場所に表示されます。 下記に実際に【Tipso】を利用したデモサイトもありますので、ご確認頂ければと思います。 デモサイト 実装に必要なファイルなどもありますので、下記リンク先よりダウンロードして下さい。 【Tipso】 Tipso 実

Webアイコンフォント【Font Awesome】の使い方を紹介したいと思います。 【Font Awesome】では、手軽にWebアイコンフォント利用でき、利用も無料(商用無料)で479個(2014/12/22)のアイコンフォントが利用できます。 また、アイコンフォントを利用すれば、Retina Displaysも気にすることがありませんし画像などを利用するよりも表示が軽く、CSSで簡単にアイコンフォントを装飾が可能です。 Webアイコンフォント利用するなら【Font Awesome】だよ、というぐらい素晴らしいです。 利用は、ファイルをダウンロードして利用する方法とCDNを利用して利用する方法があります。 基本的にどちらでもいいと思いますが、CDNの方が利用しやすいと思います。 Font Awesome Webアイコンフォント使い方 今回は、【CDN】での使い方を記載したいと思います。

今回は、CSSのみで画像をマウスオーバーすると、キャプションをスライド表示やフェードインで表示させる方法のご紹介です。 CSS3のtransformを利用しています。 一応デモサイトもありますので、ご参考下さい。 デモサイト HTML 今回のHTMLの構造は、下記のようになりますので、CSSも下記のHTMLに合わせています。 <div class="content"> <ul class="caption-box clearfix"> <li class="demo-1"> <img src="img/1.jpg"> <span class="caption caption-1"> <p>キャプション</p> </span> </li> <li class="demo-2"> <img src="img/2.jpg"> <span class="caption caption-2"> <h

今回は、WordPressで投稿した記事の投稿数を取得するテンプレートタグ【wp_count_posts();】の使い方をご紹介したいと思います。 通常は、現在の投稿数をなどを見る機会があるとすれば、管理画面上の【ダッシュボード】や【投稿一覧】などに表示されている◯◯件の投稿だと思います。 この◯◯件の表示をサイト上でも、表示させたい時は、テンプレートタグの【wp_count_posts();】を利用します。 若干、あんまり利用することのないテンプレートタグですが、あんまり利用しないからこそ自分の備忘録としてもここに残しときたいと思います。 wp_count_posts(); 使い方 まずは、単純に通常の投稿記事の公開記事件数を取得してみたいと思います。 <?php $post_count = wp_count_posts()->publish; ?> 上記の【publish】の部分は投稿

今回は、手動でWordPressの新規ユーザー登録方法についてご紹介したいと思います。 そんなの知っているよ。という方も多いと思いますが、権限グループなどの違いもよく忘れがちなどで備忘録としても記事にしたいと思います。 基本的に一人でWordPressで制作したサイトを運営していく場合は、この【ユーザー登録】と言うのは、正直必要ないと思うのですが、ブログ兼企業サイトや複数人でブログなどを運営していく場合は、こちらの便利な【ユーザー登録】をしておいたほうがいいかと思います、トラブルも未然に防ぐかとは、思います。 ユーザーの新規登録方法 まずは、ユーザーの新規登録方法ですが、登録が出来るのは【管理者】の権限を持ったユーザーのみが、新しくユーザーを登録が可能となっています。 この【管理者】と言うのは、後ほど説明します。 ユーザー登録を一度もしていなければ、基本的に現在管理画面にログインしているユ