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



子テーマで作成した際のOGPの設定

テーマを作った際にOGP設定をしますが
元々私の請け負うサイト様がほぼコーポレート系なこともあって
プラグインを使用せず書いていました。こんな風なものですね。

しかし!
諸事情により、今回このサイトでは「twentyfifteen」を親に
子テーマを作って反映させています。
そのため、今までのようにヘッダに直接書いてしまうと
更新が来たら消えちゃって、また書かないといけなくなる、
という超不便仕様ができてしまうので
OGP設定は私がいつも使っている「All in One SEO」で設定しちゃおう、というお話。
※みなさまが「All in One SEO」を使ってないかもしれませんが、あしからず。
 
 

「All in One SEO」でOGP設定を行う

「All in One SEO」で「Social Meta」を有効にする

「All in One SEO」の「Feature Manager」を開きます。
その中の「Social Meta」を「Activate」にします。
「All in One SEO」でOGP設定を行う
すると、メニューの「All in One SEO」の中に「Social Meta」が出てくるのでそちらに移動。
「All in One SEO」でOGP設定を行う

General Settings(一般設定)

All in One SEO - Social Meta
プラグインの「Jetpack」を有効にしている場合は、同じような機能のものがありますので、「Autogenerate OG Descriptions」の欄にチェックを入れて競合しないようにします。

Home Page Settings(トップページの設定)

All in One SEO - Social Meta - Home Page Settings
サイトのトップが投稿・シェアされた時の設定です。

Use AIOSEO Title and Description

本来のAll in one SEOの設定でタイトルやdeiscriptionなどの設定が済みの場合はチェックを入れます。
※チェックを入れると同じ内容でいいということになります。
変えたい場合は、チェックを外してSNS用のものを設定します。

Site Name

サイト名を記入します。

Home Image

サイトのトップがシェアされた時の画像をアップロードします。
推奨サイズは横1200px × 縦630pxで、このサイズにすると投稿幅いっぱいの画像が表示されます。

Image Settings(投稿時・シェア時の画像設定)

All in One SEO - Image Settings - Home Page Settings

Select OG:Image Source

「アイキャッチ画像」を指定。
各記事ごとに「アイキャッチ画像」を設定しておくと、その画像が出るようになります。
横幅いっぱいの画像を出したい場合は1200×630に
タイトル横に画像を出したい場合は600×315で大丈夫だと思います。

Use Default If No Image Found

チェックを入れると、アイキャッチ画像が設定されていない記事の場合に
表示させる画像を用意しておくという意味になります。
下の「Image」でアップロードしておきます。

Default OG:Image

上の記事にアイキャッチが設定されていない時の画像をアップロードします。
横1200px × 縦630pxが推奨サイズになります。

Scan Nowボタン

これを押すことでAll in One SEO以外でのmetaタグの重複チェックができます。
クリックして「No duplicate meta tags found.」と表示されればOKです。

FacebookとTwitter

Facebook Settings、Twitter Settingsについては
今回は設定していません。

FacebookのID設定の際にエラーが帰ってきて
「ユーザー名(私)によってユーザーを照会することはできません」とあったので
たぶん共有や公開、検索範囲を友人にしていたのが原因かと思います。
Facebookも鍵付きにしているので、そのこともあり
設定しませんでした。
でもデフォルトのままでも充分かと思います。

ですので、もし連携したい場合は
調べて設定してくださいね。