見せるページと見せないページを会員権限で簡単に分けるプラグイン

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。


先日、会員制サイトをWordpressで構築しました。
その際、コンテンツの閲覧を会員の権限によって分ける必要があったので、いろんなプラグインを試しましたが、最終的に採用したものをご紹介します。


類似のプラグインは多々あるのですが、日本語で設定できること、クライアント側でも簡単に設定できることを重視して今回は、 WordPress Access Controlを導入しました。
20151015_002


 導入は、プラグインページ→新規登録で入れられます。
日本語化ファイルは検索したところ複数あったのですが、一番新しそうな、こちらで配布されているものを利用させていただきました。
(リンク先があれば、この記事いらない気がしますが。)

導入後、プラグインを有効にすると、設定→Members Onlyから、サイト全体の設定ができるのですが、今回は使いませんでした。

各投稿ページの右上に公開範囲を決める選択肢が現れます。
20151015_001

ここで、ユーザーの権限に合わせて見せる範囲を決めていきます。
追加された権限などにも対応します。
20151015_003

 投稿時に、「このページを誰に見せるか」をチェック一つで選べるので、クライアント側での作業も簡単です。
非表示のページは、メニューからも消え、対象外の人には、ページの存在自体がわからなくなります。逆に、非会員のみに見せるページを作ることも可能です。(入会のご案内など)
また、この設定は投稿だけでなく、固定ページでも有効です。

これにWordpressのユーザー管理を組み合わせると、シンプルな会員制サイトのできあがりです。コンテンツ閲覧型のサイトならこれで十分機能します。


WordPressのテーマ選びに悩んだ時は!

ホームページ制作をしている方は、一度くらいは使った事がある……と思う
『WordPress』

今まで、触った事が無かった方だと
『どのテーマを使ったら良いのか』『どのテーマが目的のデザインに合っているのか』など
イロイロと悩む事があるかと思います。

そんな時には、一番シンプルで分かりやすいテーマを使って構築するのが一番ではないでしょうか。
理解できない機能満載のテーマでは、何かあった場合の問題点を探すのにも時間がかかってしまいます。

では、テーマは何を使うか?
私が一番オススメするテーマが

『WPMEMO basic』
WPMEMO_basic

『無料WordPressテーマ「WPMEMO basic」を公開しました。』

テーマの特徴
WordPress3.0以上対応
IE6,IE7, IE8, IE9 , Firefox, Chrome,Safariで動作確認済み(ただし、IE6はカスタムメニューのドロップダウンが動作しません)
カスタムメニューに対応
ウィジェットに対応
無料・商用利用可
※利用の際の注意点を必ずお読みください。


このテーマ、本当に必要最低限のファイルしかありません。
imageフォルダは有っても、中身は何も入っていません!!
今まで通常のHTMLサイトを移行するには”持ってこい”のテーマです。
そして、WordPressの構造を学んだり、オリジナルテーマを作る時の基礎にもなりえます。
レスポンシブなサイトを構築しようとした場合でも、好きな物を組み込みながら制作できますので
WordPressに慣れている方も、簡単に使う事ができると思います。

もし、テーマ探しで悩んでいるようならクセの少ないテーマを使って構築してみてはいかがでしょうか。


WordPressの高速化(初級編 EWWW Image Optimizer)

サイトの高速化に取り組む仕事があったついでに、自分たちのブログがどんな状況か、
googlepage speed Insightsを見てみたところ、

speed001

0/100

驚異の0点。はじめて見ました。ひどい。

現状、このブログは素のWordPressttwenty fiftyの組合せで、きわめてプレーンな状態です。しかし、google様には問題だらけと言うことで、多くの指摘をうけました。

中でも、一番の心当たりとして、画像の最適化があります。メンバー皆が好きなように画像を貼りまくった記事をアップしていることから、かなり影響がありそうです。しかし、画像の最適化のために結構な枚数の画像をFTPでダウンロードしてから、処理の後、再度アップするのはかなり面倒です。

そこで今回はお手軽にプラグインを導入します。

ewww01

導入したのは、EWWW Image Optimizerです。プラグインページから新規追加でカンタンに導入できます。導入後はサイドメニューのメディアからBulk Optimizeを開き、「Start optimizing」を押すだけです。画像の数によっては、かなり時間が掛かりますので、そこだけは覚悟して押して下さい。

bulkoptimize

最適化が終わって、PageSpeed Insightsに再チャレンジ。

speed002

とりあえず、一気に25までスコアアップしました!(元が悪いと上げるのもカンタンです。)
そこそこ画像がたまっている環境ですと、いっぺんに処理できて楽です。オススメです。

他にも記事にしようかと、色々試したのですが、致命的では無くとも細々とトラブルが起きました。
特にキャッシュ系は環境を選びます。素の状態で、ほぼ問題なかったのは上記プラグインのみでした。

今回は検証のみだったので、お手軽なものを使いましたが、プラグインに頼らず、キャッシュや、DBの最適化などに取り組み、地道に改善してみたいと思います。

つづく。


WordPressでプラグインVisualizerを使ってキレイなグラフを掲載してみる。

先日、Wordpressで構築したブログにグラフを手軽に載せられないか、お客様よりご相談を受け、いろいろ方法を調べてみました。グラフを載せる方法としては、エクセルでグラフを作って、画像ファイルにして貼り付けるか、プラグインで対応するかの、いずれかになります。以下プラグインでグラフを記事中に挿入する方法を紹介します。

1.プラグインVisualizer: Charts and Graphsを導入する。
特に難しいところはありません。プラグインの新規追加よりVisualizer: Charts and Graphsを導入しましょう。
2015graph001
もちろん有効化します。
2015graph002

2.グラフを作る。
導入したプラグインは、サイドメニューの「メディア」の中に項目が作れています。ちょっと面食らいましたが、画像と同じ扱いと言うことらしいです。Visualizer Libraryを選びます。
メディアから選ぶ Add Newを押してグラフの新規作成に入ります。いろいろ種類がありますが、例として円グラフのパイチャートを選択します。
パイチャートを選択
設定画面になります。
パイチャートデータ読み込み
ここで、データを読み込みます。データはPC上でもネット上でもいいのですが、CSVファイルで用意する必要があります。今回は例として以下のデータを用意しました。

種類,匹
犬,10346000
猫,9959000

1行目に項目と単位、2行目以下からデータをカンマ区切りで記入し、○○.csvの名前で保存します。トラブルを防ぐため保存はエンコードをUTF8のBOM無しにしておきます。From Computerボタンを押して、CSVファイルを選ぶと、読み込まれて画面上のグラフに反映されます。

2015graph007

数値は自動で%に変換されますので、計算は不要です。楽ですね。
NEXTで次に進み、グラフの体裁を整えます。タイトルをつけたり、色を変えたり、3D表示したり、見た目を調整して、「Create Chart」を押し完了です。

2015graph008

3.記事に貼り付ける。
再び、Visualizer Libraryのトップに戻ると作成したグラフが表示されています。必要に応じてグラフを作り、このページで管理することになります。作成したグラフの下に、貼り付け用のショートコードがありますので、コードを記事に貼り付けて完了です。

ショートコード

↓こんな感じになります。↓



英語プラグインと言うことで、取っつきにくいところもあるのですが、比較的簡単な方ではないでしょうか?
1回限りの単発での掲載であるなら、エクセルで作ったグラフのキャプチャ画像を取り掲載することをおすすめしますが、定期的にグラフを掲載するようでしたら、上記プラグインでの作業をお薦めします。

ちなみに、私は猫派です。

参照
インプレス 日本の家庭でのペット飼育の現状とは?


WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)

18

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)
3.WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)
3回目の今回は、フッターエリアの使用方法になります。
正直言って、前回でAttitudeの使い方は大筋終わっていますが、
サイトとしての形ができるまでの説明と思って読んでください。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種:歯科医院
ページ数:10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

28

 

フッターエリア(病院名、住所、診療日)
 

29

 

ダッシュボード/ 外観 / ウィジェット

30

「カスタムウィジェット画面」に移り「Footer Sidebar」にウェジットパーツをドラッグ&ドロップします。
フッターエリアは3カラムなっています。

テキスト → 病院名
テキスト → 住所
Biz Calendar → 診療日

1.病院名
ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト

ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト
テキストの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。

31

 

2.住所
 ダッシュボード / 外観  / ウィジェット / Footer Sidebar / テキスト

テキストの「▼」を押すと項目が出てきます。
本文部分に文字を入力して保存します。

32

 

3.診療日
ウィジェットあるカレンダーはブログの更新を表示するカレンダーなので
診療日や営業日を表すカレンダーには使用できません。
プラグインをインストールして、診療日を表せる「Biz Calendar」使用します。

ダッシュボード / 外観  / ウィジェット / Footer Sidebar / Biz Calendar
Biz Calendarの「▼」を押すと項目が出てきます。
タイトル部分に文字を入力して保存します。
※カレンダー設定は別途行います。

33

ここまで、HTMLを一度も記入せずサイトが完成しました。
一応は見れるサイトになったのではないでしょうか。

ここから、部分的に色を変えたりレイアウトを調節したい場合は、
CSSなどの知識が必要となります。。

無料テーマAttitudeも万能ではないので、
勉強して自分好みのサイトに近づけてください。

 


WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)

18

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)
3.WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)

前回に引き続き、WordPressの無料テーマAttitudeの使い方を
説明していきたいと思います。
今回は固定ページを作成しトップへ展開するところまでを説明します。
前回と同様の完成サイトのトップページを元に説明していきます。

制作サイト

業種:歯科医院
ページ数:10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

28

 

固定ページの作成
下記のページを固定ページで作成します。
ダッシュボード / 固定ページ /

・院長のあいさつ
・一般歯科
・小児歯科
・口臭歯科
・予防歯科
・歯周病
・ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

固定ページにはアイキャッチ画像を設定してください。

 
院長あいさつ、診療科目、ご案内、新着情報
 

19

 

1.院長あいさつ
ダッシュボード / 外観 / Theme Options / Advance Options / Home Slogan Options

スライダー下に院長あいさつを掲載します。
キャッチコピーを別で作成し、
「院長あいさつ」の固定ページにリンクをしています。

20

・Disable Slogan Part
表示の有無

・Slogan Position
表示の位置
Above Slider → スライダーの上
Below Slider → スライダーの下

・Home Page Slogan1
キャッチコピー

・Home Page Slogan2
サブコピー

・Redirect Button Text
ボタン文字

・Redirect Button Link
ボタンリンクURL

 

メインコンテンツ
ダッシュボード/ 外観 / ウィジェット

診療科目、ご案内、新着情報を掲載します。
ウェジットを使い掲載する固定ページ設定します。

「 カスタムウィジェット画面」に移り「Business Page Sidebar」にウェジットパーツをドラッグ&ドロップします。
Theme Horse:Services → 診療科目
Theme Horse: Featured Widget → ご案内
最近の投稿 → 新着情報

21

 

2.診療科目
ダッシュボード / 外観  / ウィジェット / Business Page Sidebar / Theme Horse:Services

Theme Horse:Servicesの「▼」を押すと項目が出てきます。
固定ページを6件まで設定することができます。
診療科目の一覧を作りたいので、作った固定ページをセットし保存します。

22

トップページには、固定ページのアイキャッチ、タイトル、本文の抜粋が
掲載されます。

23

 

3.ご案内
ダッシュボード / 外観  / ウィジェット / Business Page Sidebar / Theme Horse: Featured Widget
Theme Horse: Featured Widgetの「▼」を押すと項目が出てきます。
タイトルと固定ページを4件まで設定することができます。
ご案内の一覧を作りたいので、タイトルに「ご案内」と入力し
作った固定ページをセットし保存します。

24

トップページには、ウェジットで設定したタイトルと各ページの
アイキャッチとタイトルが表示されます。
25

 

4.新着情報
ダッシュボード / 外観 / ウィジェット / Business Page Sidebar / 最近の投稿

ここでは、ブログ機能を使ってアップした最新の記事を
トップページに掲載しようと思います。

最近の投稿の「▼」を押すと項目が出てきます。
タイトルと記事を何件表示するか設定します。

26

トップページには、ウェジットで設定したタイトルと
設定した件数の記事タイトルが表示されます。

27

これで、メインコンテンツ作成は終わりです。
これだけなら、簡単にできそうな気がしませんか、
興味のある方は是非トライして見てください。

次回はフッターエリアの設定の説明をします。

 


ローカル環境からのお引越し(searchreplacedb2.phpを使います)【WordPress】

みなさんのお住まいのところは梅雨入りしましたか?

私は今年の春に2階から1階に引っ越したのですが、2階の時に比べてちょっぴり湿っぽい気がします。とにかく洗濯物が乾きにくくて嫌な季節ですね。

 

150630

さて、今回はローカル(今回はMac×Mampです)から本番環境へWordpressを移行した時のお話です。

カスタムフィールドやら初期登録分の記事やら、固定ページやら、量が多くなければ本番環境でもう一度作っても良いのですが(その程度ならWP使ってないかもしれませんね)、ローカル環境でお腹いっぱいになっているWPを本番環境に引っ越します。

WP標準のインポートツールだけだと、うまく移行できないデータがあったり、データベース上のURLの書き換えがうまいこといかずにリンクが切れたりすることがあるみたいです。(※参考サイト:テストから本番へ!WordPressでURLが変わる場合のデータベース修正マニュアル)

今回は参考サイトを見ながらsearchreplacedb2.phpというスクリプトを使います。

 

作業手順

  1. ローカルからデータベースのエクスポート(sql)
  2. 本番環境にデータをインポート
  3. サイトデータをサーバにアップ
  4. searchreplacedb2.phpを使ってデータベース内のURLを書き換える
  5. searchreplacedb2.phpを削除する
準備段階としてsearchreplacedb2.phpを先にダウンロードしておきます。
(準備を全部してからの方が慌てなくていいですからね)

https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

上記リンク先のページ中程にダウンロードのリンクが有ります。V3.0.0 BETA版も有るようですが、今回は2.1.0の方を使って問題なく引越しできました!

 

ローカルからデータベースのエクスポート

MampからphpMyAdminにアクセスしてデータベースをエクスポートします。

150629_01

150629_02

ポイントは、
  • 必要なテーブルを全て選択すること。
  • SQLで出力すること。
  • 「DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER コマンドを追加する」にチェックを入れること。
のようです。実行して.sqlで保存します。

データ量が大きい場合は圧縮した方がいいのかもしれません。

 

本番環境にデータをインポート

こちらは移行先のサーバによるかも知れませんが、サーバのコントロールパネルからphpMyAdminにアクセスして「インポート」してあげます。

コレだけなんですが、コレだけでできてしまいました。

 

サイトデータをサーバにアップ

FTPツールなどで、サイトデータ(テーマファイルなど必要なもの)をアップロードします。参考サイトなどをいろいろ見ているとwp-config.phpをアップロードして書き換えると説明されているものが多かったですが、今回はその作業無くいけました。

あらかじめ本番環境にWPを設置してあったので、その辺りをいじる必要がなかったみたいです。

 

searchreplacedb2.phpを使ってデータベース内のURLを書き換える

最初にダウンロードしておいたsearchreplacedb2.phpをWPのフォルダにアップロードしてアクセスします。

URLはhttp://ドメイン/wordpress/searchreplacedb2.phpみたいなかんじです。

150629_03

「Submit」をクリックして次に進みます。

 
150629_04

書き換えを行うデータベースの情報が表示されます。
内容を確認して間違いなければ「Submit DB Details」をクリック。

 

150629_05

書き換えを行うテーブルを選択します。
※初期状態で全選択されていたので、そのままで良かったです。

確認したら「Continue」をクリック。

 

150629_06

上のテキストボックスに「どの文字列を書き換えるか(旧URL)」を入力。
下のテキストボックスには「書き換え後のURL(新URL)」を入力します。
末尾に / を入れないのがポイントみたいです!

内容を確認したら「Submit Seach string」をクリック。
コレでURLの書き換えが行われます。
本番サイトを確認してみましょう。

 

searchreplacedb2.phpを削除する

書き換えが行われたのを確認して、searchreplacedb2.phpをサーバから削除します。

150629_07

 

何度も表示されてますが「消すの忘れないでね!」出そうです。

このスクリプトにアクセスできると、誰でも書き換えができてしまいますからね。
絶対に削除しましょう。

 

まとめ

今回はテストから本番環境への移行で利用しましたが、サーバが移行したときなどにも使えそうです。(カスタムフィールドを作りすぎて移行がすこぶる大変になってしまった。カスタムフィールドのメンテが今後思いやられます・・・)

データベースをいじくるので、ご利用は自己責任かつ、細心の注意が必要ですね。

今回参考にさせていただいたサイト様
ありがとうございました!


theta360.comの埋込み画像をwordpressでlightbox風に表示する方法

前回、ワードプレスにプラグインを導入することで、直接全天球写真をアップできるようにしましたが、安定した閲覧環境を考えると、リコーのサービス、theta360.comも外せません。今回は、theta360.comの画像を記事に埋め込みつつ、更にlightbox風表示にも対応してみたいと思います。 続きを読む theta360.comの埋込み画像をwordpressでlightbox風に表示する方法


WordPressの無料テーマAttitudeの使い方

18

1.WordPressの無料テーマAttitudeの使い方
2.WordPressの無料テーマAttitudeの使い方(固定ページ活用方法)
3.WordPressの無料テーマAttitudeの使い方(フッターエリア使用方法)

以前、「WordPressで無料テーマAttitudeを使ってのサイト制作」を書いたところ、
思いのほかアクセスがあったので、WordPressの無料テーマAttitudeの使い方を
3回に分けて詳しく説明していきたいと思います。
再度、無料テーマAttitudeの説明しますので以前の内容と重複する箇所がありますので、ご了承ください。今回も、初心者の方もできるように、CSSの変更は行いません。
サイト内容は前回と同様の内容で行いたいと思います。

制作サイト

業種:歯科医院
ページ数:10ページ程度

グローバルメニュー
・トップページ
・院長のあいさつ
・診療科目
—一般歯科
—小児歯科
—口臭歯科
—予防歯科
—歯周病
—ホワイトニング
・初めての患者様
・アクセス
・お問い合わせ

 

完成サイトのトップページを元に説明していきます。

28

ちなみに無料テーマAttitudeはレスポンシブ対応なので
スマートフォンだとこんな感じに見えます。

2

 

はじめに
無料テーマAttitudeはブログ用のテーマですので、
コーポレートサイト用のテンプレート切り替える必要があります。

テンプレートの設定

固定ページの作成

新規にページを作成します。記事タイトルを記入、テンプレート欄で「Business Template」を選択、【公開】ボタンを押します。
本文は空白のままでOKです。

7

作った固定ページをフロントページとして使用
ダッシュボード / 設定 / 表示設定

今作った固定ページをトップページに設定します。
フロントページの右側にあるリスト内から指定し設定を保存します。

8

そうすると、コーポレートサイト用のテンプレート切り替わります。

 

ページレイアウト設定

ダッシュボード / 外観 / Theme Options / Design Options

9

サイト全体の幅の設定 (Site Layout Options)
Narrow Layout → 狭いレイアウト
Wide Layout → 広いレイアウト
基本のページレイアウト設定 (Default Layout Options)
No Sidebar → サイドバーなし
No Sidebar, Full Width → サイドバーなし全幅
No Sidebar, One Column → サイドバーなし1カラム
Left Sidebar → 左サイドバー
Right Sidebar → 右サイドバー

※ページごとにレイアウトを変更することはできます。

背景の設定

ダッシュボード / 外観 / Theme Options / Design Options / Custom Back Ground

全幅のレイアウトを選択していると意味がないですが、
背景に画像設置や背景色変更ができます。

10 11

 
ヘッダー、メニュー、スライダー
3

 

1.タイトル部分

タイトル形式
ダッシュボード / 外観 / Theme Options / Design Options / Custom Header

12

・Header Logo
ロゴ画像を設定できます。

・Show
Header Logo Only → ロゴ画像のみ表示
Header Text Only → テキストのみ表示
Disable  → 非表示

・Need to replace Header Image?
ヘッダー画像変更

・Hide Searchform from Header
検索窓の有無

※ロゴの部分をテキストのみにする場合
ダッシュボード / 外観 / カスタマイズ / サイトタイトルとキャッチフレーズ

5

サイトタイトルとキャッチフレーズを入力します。

 

2.ソーシャル
ダッシュボード / 外観 / Theme Options / Social Links

6

使用しているソーシャルサービスのURLを入力します。

Facebook
Twitter
Google Plus
Pinterest
Youtube
Vimeo
LinkedIn
Flickr
Tumblr
Myspace
RSS

 

3.メニュー
ダッシュボード / 外観 / メニュー

13

必要なメニューを設定して
テーマの位置 Primary Menu にチェックを入れます。

 

4.スライダー
無料テーマAttitudeで使用しているスライダーは、
固定ページもしくは投稿ページのIDを設定して表示します。
画像はアイキャッチ画像を使用し、
タイトルと本文の一部を表示します。

15 16

 

スライダーの基本設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Slider Options

14

・Disable Slider
表示、非表示

・Number of Slides
スライド枚数

・Transition Effect
画像切替の効果

・Transition Delay
スライド時間

・Transition Length
切替時間

スライダーの内容設定
ダッシュボード / 外観 / Theme Options / Featured Post / Page Slider / Featured Post/Page Slider Options

17

IDを設定することによりトップページにスライダーが表示されます
以上でヘッダー~スライダーまでの使い方になります。

次回は固定ページなどの扱いを説明します。


RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法

20150320ricoh
超お手軽に360°写真を取ることが出来るリコーのシータですが、この写真をWordPressの記事中にアップしようとすると、現状リコーのサービスtheta360.comを使い埋め込みコードを取得する事になります。ユーザー登録が必要でFacebookアカウントも必要と、少々面倒です。代わりの方法が無いか調べてみましたが、余所で紹介されていたのは別のWEBサービスを利用する方法でした。

theta360.comは簡単にパノラマ画像をWEB利用できる良いサービスですが用途によっては外部サーバーを使いたくないケースも多々あると思います。出来ればサーバー内で完結させたい!今回はWordPressの記事中へのパノラマ画像の埋め込みをプラグインのみでやってみました。 続きを読む RICOH THETAのパノラマ写真を外部サーバー(theta360.com)を使わずにWordPressの記事に埋め込む方法