WordPress:レスポンシブに対応したギャラリー「Unite Gallery」

タイル状にギャラリーを簡単につくれる「Unite Gallery」の紹介。
こんな感じ。

タイル状にサムネイルが並んで、クリックでLightBox風に大きく表示されるというもの。
「Unite Gallery Lite」という無償版もあるので枚数が少ない方はそちらでもOK。
無償版は1つのギャラリーに載せられる画像が12枚まで、という制限つきなのでそれ以上掲載したい方は有料版を入手してください。
ちなみに、19$(手数料入れて21$)でした。(2017/09現在)

「Unite Gallery」公式でデモ確認できます

プラグイン「Unite Gallery」の公式ページはこちら

ここのタイトル下にあるテーマをクリックすると、いろいろ選べます。

10種類以上のスタイルのギャラリーが選べます。

「Unite Gallery Light」使い方

プラグインのインストールまでは省略します。有効化してください。

インストールするとメニューが出てきます。
「Galleries」→「Create New Gallery」へ。

どのタイプがいいか選択します。
わからない場合は、公式で再度確認するか、デフォルトでOK
後から変更することもできます。
「Tiles-Columns」を選択すると、タイル風になります。

Gallery Title : ギャラリーのタイトルを入力
Gallery Alias : ショートコードで使用する値

Gallery Aliasの方は後で自分で分かりやすい単語などにしておいてください。
入力したら「Create Gallery」をクリックします。

「ITEM」のタブに切り替え、「Add images」ボタンを押して、ファイルを入れます。
名前は自動的に入りますがあとで、写真をクリックすると編集可能です。

写真を入れたら「Preview」で確認できます。
「Setting」タブに戻り「Gallery Shortcode」にあるショートコードを固定ページや、投稿ページに貼り付ければOK。
貼り付けたあとでSettingで写真の大きさなどを変えたい場合は、サイズを変更したあと
一番下の「Update Gallery」のをクリックで反映されます。

有料版を手に入れるには

envatomarketで購入します。
「Unite Galler」の有料版ページはこちらここの右上の「Shign in」からアカウント作成にうつります。

アカウントを作成する

右上の「Sign in」をクリック。
ポップアップするのでアカウントのない人は一番下の「Create an Envato account」をクリック。

中学英語がわかればできる英語なので大丈夫。
———————————–
First Name: 名前
Last Name: 苗字
Username: 好きなアカウント名
Email: アカウント作成後のお知らせを受け取るメールアドレス
Choose your username: ユーザーネーム
Choose your password: パスワードを
最後に非ロボットの認証をして、アカウントを作成します。
———————————–

国と、お知らせメールの有無を聞かれるので選択し、最後にはプライバシーポリシーに同意するか?というチェックです。

有料版ページはこちらから入っているので、アカウント作成が終了したら自動的にログインした状態で、「Unite Gallery」の有料版ページに戻ります。

カートに入れるボタンを押すと、下の画面になります。

 
小さいチェックボックスは、お金払ったらサポート12ヶ月まで延長しますよ、の意味。
下の「Go to checkout」をクリックします。

「Billing Details」は支払い明細のこと。
ログインしているので「First Name」「Last Name」「Country」は自動的に入力されてます。
あとは住所を入力。
住所の英語表記は「住所 英語表記」などでGoogleさんに聞いてください。
書けたら「Save and continue」。

クレジットカードかPaypalで支払います。
PayPalはカード番号入力とかがなくてほんと便利。

間違ってまた買わないように。
「Download」からPCにダウンロードします。
圧縮されたzipを解凍します。
さらにその下に圧縮されているので、それを解凍したものをプラグインのフォルダに入れて有効化します。
するとLite版が継承されて、有料版がそのまま使えます。

WordPress:GoogleMapを簡単に設置できるSimple Mapの使い方

教えてもらってとても便利だったのでご紹介。

ただ、プラグインをいれなくても、GoogleMapで住所検索したあと、共有ボタンを押して「地図を埋め込む」タブに切り替えれば、GoogleMapの埋め込みコードが取得できます。

けれど、いちいち、検索して貼り付けが面倒、とかGoogleMapのポップアップに簡単にテキストを入れたいとか・・・そいうのが簡単にできるプラグインです。

ということで、使い方の説明。
ただ、インストール部分は省きます。「Simple Map」で検索し、インストールして有効化します。

使い方・挿入方法

具体的にどのようにして地図を挿入するかというと、ショートコードを貼り付けるだけ。
このプラグインは、特に設定の必要はなく、ショートコードを貼り付けるだけで、投稿や固定ページにGoogleMapを挿入することができます。

住所のみ

住所だけを入力してショートコードにします。

※モードは「ビジュアル」ではなく、かならず「テキスト」にしてください!

これを記事に貼るだけ。

住所+幅+高さ指定

初期設定では幅が100%なので、幅と高さも変えることができます。

住所+テキストをポップアップ

アイコンクリックでテキストをポップアップさせることもできます。
[map addr=”住所”]ここの中にテキストを書きます。[/map]

Google Maps APIキーが必要

ただ、Simple MapプラグインはGoogle Maps APIキーが必要との警告が出ます。
取得方法はプラグインの「設定ページへ移動して設定してください。」をクリックすると、説明ページが開き、日本語でわかりやすく説明してくれています。



WordPressでサムネイル付きの特定カテゴリを最新5件取得する

いつも忘れるので。備忘録。

主にコーポレートサイトを制作することが多いのですが、最新記事以外にコラムなどとしてサムネイル写真付きでトップページに最新5件出したい、ということがあります。
プラス、記事内容を少し出したいということも。
よくニュースサイトなどで見かけるやつです。

  • 特定カテゴリのみ
  • 最新5件
  • リストにして
  • サムネイル付き
  • 記事内容を文字数指定

これ全部やっちゃいます。

「news」というスラッグ名のカテゴリを最新5件、サムネイル付き&記事内容を文字数指定して抽出しています。

カテゴリの指定

カテゴリの指定は2行目。スラッグ名を入力。

最新の記事数を指定

3行目に記事数の指定を行なっています。最新5件出す様にしています。

記事内容の取得する文字数を指定

21行目に記事内容の文字数を指定しています。
0というのは何文字目から抜き出すか、ということなのでここでは「0文字目から30文字目まで抜き出す」という指定になっています。

アイキャッチがないときの処理

アイキャッチがないときの処理は14行目にあります。
ないときはFontAwesomeでアイコンを出すようにしています。
FontAwesomeでアイコンを出すには内に読み込むなどの処理が必要ですが、ここで書くと長くなるので、こちらがとても丁寧に説明してくださっています。とても簡単ですのでここを参考にどうぞ。
【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう
別にこれでなくても、Noimageの画像をつくって表示させるのでも大丈夫です。