wordpress plugin screen options and help show customize version up 1.2.1

管理画面内の上のほうにある、「表示オプション」と「ヘルプ」メニューの表示カスタマイズができる

Screen Options and Help Show Customize

のバージョンアップをおこないました。
最新バージョンは1.2.1。

 

やったこと

マルチサイトにはまりました…。

マルチサイトの機能を前回付けたのですが、通常のノーマル?のサイトで上手く動かないバグが発生していたので修正しました。

 

そして、プラグイン設定画面のレイアウトを少し変更しました。

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/screen-options-and-help-show-customize/

 

もしくは、管理画面のプラグインから、「Screen Options and Help Show Customize」と検索して、インストールしてください。

プラグイン設定画面の画面構成及びレイアウトを考えてみる

今のところ、3/23の時点で、wordpress.orgにて配布している私のプラグインは合計10個、
全てのプラグインのダウンロード数は、総数 6,825 ダウンロードとなりました。

だいたい200~2,000まで、ダウンロード数はばらばら。

多いのか、少ないのか。ぴんときませんが、メジャーなプラグインのダウンロード数と比較すると…

かなり少ない…でもしょうがない。
役目が違うという事と、認知度と、使いやすさや便利さ、機能性にもよるだろうし。

でも、それぐらいのユーザーが居る。という事は分かります。

 

ただ、この約6,800というダウンロード数から、何%の人がプラグイン開発者のサイトに訪れているのか

一人のユーザーが何回も同じプラグインを使うことはもちろん考えられます。
今は一旦、それはおいておきます。

 

寄付のリンクを何人がクリックしたか調べてみたのですが、2/20~3/20までの一ヶ月間で、たったの6人。

つまり、私の全プラグインの場合だと 約0.08% の人が訪れる 計算。

確かにダウンロード数は少ないでしょうがないかもしれませんが、いくら何でも訪問者少なすぎでしょ! 😯

 

では、この 0.08% のサイトへの訪問率をどれだけあげることができるのか?

ということでwordpressのプラグイン設定画面にて、プラグインの画面構成・レイアウトを変えて(目障りにならない程度に)、サイトへの訪問率をどれだけ上げることができるのかをやっていくことにしました。

 

なので、この記事は使いやすいプラグインのレイアウト紹介というわけではなく、どうやったら開発者のサイトへ訪れてくれる確立を増やす事が出来るか、寄付や有料版の案内を上手くできるかという点のみを考慮しての、画面構成・レイアウトを考える記事となります。

 

特にゴールとするレイアウトは何もありませんが、まずは有名どころのプラグインを片っ端からダウンロードしてインストールしてみて、いいところだけをパクる学んで取り入れようということに。

そこから、ゴールとするレイアウトが見えてくるのでは?という考えです。

 

それから、有名プラグインをインストールしてプラグインの設定画面が参考になるものを探してみました。

wordpress.org で Most Popular のページに行くと有名どころのプラグインがずらり。

http://wordpress.org/extend/plugins/browse/popular/

 

いくつかインストールして設定画面を見てみました。
そのなかからおすすめしたいプラグインの設定画面を10個ほど、厳選して紹介してみます。

プラグイン設定画面・レイアウトづくり参考プラグイン

1.WordPress SEO by Yoast

wordpress seo by yoast
wordpress seo by yoast

かなり力を入れている気がします。右側にイラスト付きのバナーなので、目がいきますね。
ただ、左側の「ダッシュボード」的な表示はかなり邪魔に思いました。。

画面幅も考えられていますね。
画面の幅を小さくすると右側のバナーが下にずれるので、横スクロールバーが表示されるのを極力避けています。

wordpress seo by yoast smallwidth
wordpress seo by yoast smallwidth

2.Google Analytics for WordPress

一瞬、「えっ?」と思いました。wordpress seo by yoastは停止させたけどなぁ。
何で同じバナーが右側に表示されているんだろう。 😕
そして、気づきました。。。同じ作者やん。

google analytics for wordpress
google analytics for wordpress

WordPress SEO by Yoast とは少し違い、バナーはひとつだけのようです。
 プラグインの評価をつけてね。ユーザーフォーラムはこっちだよ。といった一般的な情報だけですね。

 

3. Google XML Sitemaps

google xml sitemaps
google xml sitemaps

機能の提案、通知一覧、公式FAQなど、プラグインについての改善や提案などの情報が充実していると感じました。
ところどころ、日本語訳がされていないのがちょっと残念です。

やっぱりこう見ると、使用するユーザーの言語で使用できるというのは、何の機能の設定なのかが分かるので安心しますね。

 

4.All in One SEO Pack

all in one seo pack
all in one seo pack

設定の前に、プラグインに関する情報や寄付の案内、何かの割引サービス的な表示をしています。
設定の前にプラグインの情報を掲載。するという点が微妙な所ですね。
今回の All in One SEO Pack については、特に邪魔には感じませんでした。

これぐらいシンプルなら、大丈夫なのかも。

 

5.Ultimate TinyMCE

インストールして有効化すると、ちょっとびっくり。

Ultimate TinyMCE activate
Ultimate TinyMCE activate

プラグインの一覧だけでも、かなり目立!
へぇ~こんな方法もあるのか。
これはいい参考になりそうです。あまり派手にし過ぎると良くないですが。

プラグイン設定ページにいくと…。

Ultimate TinyMCE
Ultimate TinyMCE

ひとこと。「なんて緑だ!」
(分からない人は バイキング で調べてね)

これだけ色が主張していると、目がいきますね。それと、私は次の表示を「ユーモア」ととらえました。

Ultimate TinyMCE donate
Ultimate TinyMCE donate

人間味が溢れている 😆

でも実際、私もそうですがプラグイン開発者もひとりの人間です。そりゃ日曜日もありますよね。

 

Ultimate TinyMCEの開発者は、息子がいないのか?そう考えてしまいました。
そっちじゃないか。でも寄付の目的等を書くことは良いことかもしれません

また、

Ultimate TinyMCE settingpage
Ultimate TinyMCE settingpage

PROバージョンを購入するとこの機能が使えるようになりますよ。
という事が一目見て分かるよう作られていました。これはいいですね。
よく、「PROバージョンはこちら」とはありますが、PROバージョンとの比較をする為にわざわざそのサイトに訪問しないといけないので、少し手間が入ります。

プラグインの設定画面ですぐにその比較ができると、手間が減っていいかもしれませんね。

具体的な必要性を感じさせてから、開発者のサイトに訪問させる。

大事な事かもしれません。

 

6.WooCommerce – excelling eCommerce

インストール…そして有効化…そしてその後…。

WooCommerce notice
WooCommerce notice

「販売を開始する準備ができました」

はい、分かりました。分かりましたが、、関係のないページにも案内を出すのは…。
個人的にはちょっと辞めて欲しい点だと思いました  😕

でもそれ以外はいたってシンプル。

woocommerce setting
woocommerce setting

プラグイン作者サイトへの案内は、この水色で囲ったところだけでした。
Ultimate TinyMCEを見た後にこのプラグインの設定画面を見て思うことが。

もう少し色々と案内を記載してもいいのでは?と感じましたね。

 

 7.BackWPup

BackWpup setting
BackWpup setting

設定画面は設定だけ。
それとは別に上のスクリーンショットの「About」というページがあり、このプラグインについての説明を詳しく記載しているようです。

また、プラグインの販売サイトでよくやっている、無料版と有料版との比較。
これをプラグインのAboutページで説明するという手法もいいですね。

ページとして独立させれば、そんなに邪魔に感じないかも。

BackWpup comparison
BackWpup comparison

BackWpupのなかでも、これはとても気に入りました。

BackWpup dashboard
BackWpup dashboard

何が?って思いますよね。これです。これ。

BackWpup footer
BackWpup footer

フッターにさりげなくプラグイン作者の情報が載っているところ。
他の固定ページや、投稿にいってもこの表記はちょっと…と思いますが、プラグイン設定ページのフッターのみ、このようなフッターとなっています。

これはいいですね。あまり目立たないかもしれませんが、こういう小さな積み重ね、大事だと思います。

 

8.Contact Form 7

とてもシンプル。

Contact form 7
Contact form 7

使い方やFAQなど、少ない表記でリンクをつけて上に位置させる。
これは分かりやすいですね。でも、シンプルだからこそ分かりやすいはず。

 

9.Wordfence Security

個人的には良くなかった例です。Wordfence Security をインストールしてみましたが。。

Wordfence security
Wordfence security

とにかく、テキストが多い、、かつ、翻訳されていないので何が書いてあるのかよく分からない。。 😕

そして、この画面。

Wordfence security blocking
Wordfence security blocking

うっすらと、背景のように見える設定画面。見えますか?
その前面に英文でこう書かれています。(簡単に訳しています)

有料会員のみ、この機能へアクセスができます(使えます)。有料版はこちら

うーん、なんでしょう。なんか、、妙に嫌気がさしました。

 

10.SEO Friendly Images

ここまで記事書くのも結構疲れました。。そんなことはさておき、本題。

さっそくインストールしてみました。

SEO Friendly Image
SEO Friendly Image

とてもシンプル。シンプルなので、バナーのほうにまずは目がいきました。
なかでも、「Useful plugins」(便利なプラグイン集的な)はいいなと感じました。

wordpressのカスタマイズをなんでもいいからしようとするとき、その希望の動作のプラグインが、まず存在しているのか、いないのか。

分からないですよね。
なのでそのようなプラグインがないかどうか、ネットや書籍で色々な方法で探し始めるはずです。

この、Useful plugins に偶然その希望の動作のプラグインがあれば、ダウンロードして試すだろうなと思いました。そこまでダウンロードされる可能性は高くはないと思いますが、小さな積み重ねは必要だと思います。
ただ、もう少し説明を加えたらもっとよくなるはず。

プラグイン名

このプラグインはこういう時に便利なプラグイン。こういう事ができます。

 

みたいな。

 

 

以上10プラグインの画面構成・レイアウトの例でした。
個人的にはどれもこれも、参考になりました。
アクセスを呼びたいなら、目立つ事は大切です。ですが…。
似たような機能のプラグインがあったら、人は使いやすいほうを自然と選ぶだろうと思います。

適度に目立たせてサイトへの訪問率を上げてみたいと思います。

上がらなかったら…誰か教えてください 😳

 

でもそのまえに。

レイアウト変更の為にプラグインを更新してもしょうがない。
何か機能の更新やバグがあったときに、一緒にレイアウトは変更しよう。

なので、今すぐの対応予定はないですね。

wordpress 3.6 リリース辺りが今のところの目途ですね。

 

– 2013年4月9日追記 –

レイアウト変更を、3.6がリリースされるよりも前にすることにしました。
そのほうが、3.6に対応するバグ修正はしやすいと思いましたので。

その後のレイアウト変更後はこちらです。

プラグイン設定画面の画面構成及びレイアウトを考えてみる-その後

 

wordpress plugin WP Admin UI Customize version up 1.2

wordpressの管理画面のカスタマイズができる

WP Admin UI Customize

のバージョンアップをおこないました。
最新バージョンは1.2。

 

やったこと

新規投稿、投稿編集画面にて、パーマリンクがデフォルトの設定の時、
「パーマリンクの変更」のリンクが表示されるのですが、このリンクを非表示にする項目を追加しました。

パーマリンク変更リンクボタン
パーマリンク変更リンクボタン

それと、「外観」→「メニュー」にて、メニューを新規で作成したり、作成済みのメニューが削除できるようになっていますが、このリンクを非表示にする項目を追加しました。

外観メニュー設定
外観メニュー設定

そもそもこんな機能使うの?っていう方もいると思います。

私の場合、先にメニューを作成し、クライアントにCMSとして納品。
その場合、“作成したメニュー内”に固定ページやカテゴリページのリンクを設置して欲しのですが、クライアントさんがメニューを作成して、「表示されないけど?」みたいな事がありましたので、このような項目を追加しました。

作成済みのメニューだけで、サイトを運営したい時には便利だと思います。

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/wp-admin-ui-customize/

 

もしくは、管理画面のプラグインから、「WP Admin UI Customize」と検索して、インストールしてください。

クライアントに納品するWordPressの管理画面カスタマイズ vol.5

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.4 にて、ログイン画面のカスタマイズをおこない、ほぼカスタマイズ完了と言える状態となりました。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

クライアントさんが管理画面にログインした際に、今の契約内容は一目で分かるほうがいいですよね。

各レンタルサーバがやっているようなイメージ。

ロリポップの契約内容画面
ロリポップの契約内容画面

こういった契約状況や、制作会社からクライアントへのお知らせ等を、管理画面内のダッシュボードに表示させたいと思います。

 

プラグイン Announce from the Dashboard をまずはインストール

announce from the dashboard インストール
announce from the dashboard インストール

Announce from the Dashboard をインストールし、有効化すると、サイドメニューの「設定」の中にメニューが作られます。
日本語の環境だと、「ダッシュボードお知らせ」というメニューです。

メニュー表示
メニュー表示

Announce from the dashboardの設定画面に移ると、ダッシュボードに表示したい内容、権限、お知らせの種類を選択できるので、それぞれ入力・選択していきます。
  (ここは例として、ロリポップの契約期間の真似をしています。)  

ダッシュボードへのお知らせ作成例
ダッシュボードへのお知らせ作成例

 

こんな感じですね。これで保存します。
これで、指定した権限のユーザー(ここではクライアント)に現在の契約内容が表示されるようになります。

お知らせ設定後
お知らせ設定後

注意を引く赤枠で囲ったり、通常のメタボックスのような表示もできます。

また、いくつでもお知らせを作ることができるので、契約内容とは別のお知らせをつけることもできます。

 

次は クライアントに納品するwordpressの管理画面カスタマイズ vol.6 にて、投稿画面のカスタマイズとなります。

 

Custom Options Plus Post In バージョンアップ

このたび、CUSTOM OPTIONS PLUS POST IN のバージョンアップをおこないました。

最新バージョンは、1.2となります。
主にデータベース周りの格納方法の更新を行いました。

 

一度シリアライズしたデータを格納、取り出す際はシリアライズし、
ひとつのデータを取り出す形式について、おそらく処理を指摘されていたので変更しました。

 

今まで

wp_options 内に、キー coppi として格納

coppi1.2以前の格納方法
coppi1.2以前の格納方法

 

現在

テーブルを用意した格納方法

 

coppiテーブル
coppiテーブル
データ格納サンプル
データ格納サンプル

update_option 及び get_optionを使わずに、テーブルを用意するので、そもそも、

どうやってやるんだろう。。と色々思考錯誤しましたが、下記の記事に感謝です。

 

Creating_Tables_with_Plugins

http://codex.wordpress.org/Creating_Tables_with_Plugins

■ WordPressでデータベースを使ったプラグインを作成する

http://takahashifumiki.com/web/programing/1440/

 

テーブルを用意することでのメリットは、まずは ソート がかなり楽になりました。
今まではget_option全データをとにかく取得し、指定されたソートの順序になるようarray_multisortを行っていたのですが、sqlクエリとして投げるだけなので、返ってきたデータがソート済み。

次に、一つのデータを取り出すのも楽になりました。

 

プラグインが有効化された際に、テーブルを作成し、元のデータを取得しそこに複製された時は、
おぉーってなりましたねw

 

ただ、sqlクエリを直接書くことになるので、脆弱性が気になります。
(sqlに限った事じゃないですが)

試していて、よく分からなかった 「$wpdb->prepare」。

wordpress 3.4.2 のバージョンでテスト動作を繰り替えし、動作確認をして、
いざ wordpress 3.5 で動作をすると、

Warning: Missing argument 2 for wpdb::prepare()

が連発。んん??どういうエラーなんだろうと色々とぐぐってみました。

$wpdb->prepare() 自体の動作は、SQL インジェクション攻撃からクエリを保護する によると、
クエリを保護するためにエスケープするためのもの。らしいのですが、こんな記事もありました。

Warning: Missing argument 2 for wpdb::prepare()は危険!

正しい使い方をしないと、危ないよ。という事らしいです。

3.4ではエラーも出ないのか。。そもそも使い方を間違っていたと。

この記事の下のほうまで読んでいくと、akismetプラグインの場合の記述リンクがあったので見てみると、

 $remaining = $wpdb->get_var( $wpdb->prepare( "SELECT COUNT(*) FROM $wpdb->commentmeta WHERE meta_key = 'akismet_error'" ) );

$remaining = $wpdb->get_var( "SELECT COUNT(*) FROM $wpdb->commentmeta WHERE meta_key = 'akismet_error'" );

こうなっていました。

$wpdb->prepare を外したんですね。

今回はakismetプラグインを参考にして、$wpdb->prepare を外すと動作OK。3.4.2で試しもてもOK。

とりあえず、今回はこれでよしとして、アップデートしました。

 

こういう面を色々と考えると、難しいです。
出来る限り、使えるテーブルは使ったほうが、ありがたい。のかも。

 

ダウンロードはこちら http://wordpress.org/extend/plugins/custom-options-plus-post-in/

wordpress プラグイン WP Admin UI Customize 1.1.2

管理画面全般のカスタマイズをする、

WP Admin UI Customize

のバージョンアップをおこないました。
最新バージョンは1.1.2。

 

※既に1.1もしくは1.1.1をお使いの方へ。
admin bar の更新不具合があり、正常に保存されないバグがありました。

お手数ですが、プラグインの更新をお願いします。

 

ダウンロードはこちら
http://wordpress.org/extend/plugins/wp-admin-ui-customize/

 

もしくは、

プラグイン検索方法

管理画面のプラグインから、「WP Admin UI Customize」と検索して、インストールしてください。

 

クライアントに納品するWordPressの管理画面カスタマイズ vol.4

vol.1~vol.3 までで、管理画面のカスタマイズはほとんど終えたと思います。
前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.3

 

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次は、デフォルトのログイン画面をカスタマイズします。

 

ログイン画面

ログイン画面
ログイン画面

これがデフォルトのログイン画面。WordPressのロゴがあり、クリックするとWordPress.orgのサイトへ飛びます。

別にこの状態を変更する必要は無いですが、特にWordPress.orgにリンクさせる必要もないと思います。
逆に、WordPress.orgにジャンプすると「これ何ですか?」となって、説明するのがちょっと大変。。。

なので、この状態をカスタマイズします。

 

ログインフォーム

ログインフォーム設定
ログインフォーム設定

この項目はログインフォームのロゴのカスタマイズができます。
ログをクリックするとクライアントサイトのトップにジャンプするように。
ロゴのタイトルはクライアントサイトの名前になるようにカスタマイズできます。

例ですが、ロゴ画像をクライアントのロゴ画像に変更する場合。

ログインフォーム設定例1
ログインフォーム設定例1

こんな感じです。これで、ログイン画面を確認してみます。

ログイン画面2
ログイン画面2

おっと、ロゴ画像を用意するのを忘れていました。

とりあえず、適当にロゴ画像を用意して、指定したディレクトリに入れると、

ログイン画面3
ログイン画面3

ものすごく、ロゴの画像がつぶされてしまいました。 😳
元のロゴ画像のサイズを調べてみると、幅(width)274px、高さ(height)63pxのようなので、そのサイズにロゴ画像を調整して、もう一度確認すると…

ログイン画面4
ログイン画面4

これでよさそうです。

あとはお好みで、独自のCSSを読み込んだり、フッターにテキストを追加してください。

もっとログイン画面をカスタマイズしたいという方は、クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5をご覧ください。

次は、クライアントに納品するwordpressの管理画面カスタマイズ vol.5 で、クライアントの管理画面のダッシュボードに、現在の契約内容やお知らせを表示する方法です。

クライアントに納品するwordpressの管理画面カスタマイズ vol.3

前回はサイドメニューまで終えました。
前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.2

 

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次はメタボックスの設定に移ります。
メタボックスとは…投稿や固定ページ作成にある、アイキャッチやフォーマットの類のことです。
リビジョンやスラッグとか、クライアントによっては必要ないときもありますよね(ない?)。

メタボックスの例
メタボックスの例

 

 

メタボックス削除

ここまでくると、あまり設定についての説明が不要な気がしてきました。(疲れただけ…?
そんなことはさておいて。。。とりあえず設定します。

投稿・固定ページともに不必要なメタボックスとして、

  • アイキャッチ
  • 抜粋
  • トラックバック送信
  • カスタムフィールド
  • ディスカッション
  • コメント
  • スラッグ作成者
  • リビジョン
  • フォーマット
  • タグ

を削除します。(ほとんど。 😯

メタボックス削除設定例
メタボックス削除設定例

どうですか?このようにシンプルになりましたか?

メタボックス削除設定例2
メタボックス削除設定例2

これで投稿画面はカスタマイズができ、クライアント向けになりました。
だけど、投稿一覧固定ページ一覧の表示もカスタマイズしたくなりますよね。

投稿一覧画面
投稿一覧画面

これもカスタマイズするので、別のプラグインを用意します。

 

Post Lists View Custom

プラグイン「Post Lists View Custom」をインストールしてください。
Post Lists View Custom

post list view custom 検索

インストールし、有効化するとサイドメニューの「設定」の下に、「Post Lists View Custom」メニューが追加されているので、そこから投稿一覧表示設定をクリックしてください。

post lists view custom 設定画面

 

カスタムフィールドを使っている場合、カスタムフィールドも投稿一覧内に表示させることができます。

上の「表示する」の項目が、投稿一覧に表示される項目となります。
今回は、タイトル、カテゴリー、日時 の3つだけにします。

post lists view custom 設定例1
post lists view custom 設定例1

これで、投稿一覧のカスタマイズができました。この調子で固定ページ一覧もカスタマイズしてください。

post lists view custom 適用例
post lists view custom 適用例

 

これで、管理画面のほとんどをカスタマイズできました。
次は、クライアントに納品するwordpressの管理画面カスタマイズ vol.4での、
ログイン画面のカスタマイズに進んでください。

クライアントに納品するWordPressの管理画面カスタマイズ vol.2

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.1 にて、管理画面の全般に関するカスタマイズをおこないました。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1 
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

次は「ダッシュボード」のカスタマイズに移ります。

 

ダッシュボード

クライアントには、WordPress ブログやWordPressフォーラムなんて必要ないと思います。

ダッシュボード設定画面
ダッシュボード設定画面

なので、表示したくないものに関してチェックを入れれば、表示されなくなります。

ダッシュボード設定例
ダッシュボード設定例

 

 

次はAdmin bar (管理バー)

管理バー設定
管理バー設定

左上にwordpressのロゴがあったり、コメントを使ってないのにコメントの新着が見れたりと、デフォルトの管理バーでは不便があるので、カスタマイズします。

「左」と「右」の項目2つがありますが、これは左上の管理バーメニューと右上の管理バーメニューのことです。

まずは、左上メニューのwordpressロゴ部分を削除してみます。
「左」項目のロゴ画像があるところ(wp-logo)の右の下向き三角をクリックします。
すると、そのメニュー内にある、サブメニュー一覧が表示されます。

ロゴ設定
ロゴ設定

で、ロゴは要らないので、削除をクリック。

ロゴ削除
ロゴ削除

この調子でコメントも必要ないなら削除。

次は右の項目。こんちはっす、○○○さん!とかも必要ないし、ログアウトだけで充分じゃないかと思います。
なので、こんにちは~の部分から一式削除。

これで、だいぶすっきりしてきました。

管理バー設定例1
管理バー設定例1

次に、右項目にログアウトを挿入してみます。
下の追加できるメニュー一覧から、ログアウトをドラッグ&ドロップで右項目へひっぱってください。

管理バー設定例2
管理バー設定例2

これで、右項目にログアウトが挿入されるはずです。

管理バー設定例3
管理バー設定例3

あ、「保存」をするのを忘れずに。
それと、外部リンク等を個別につけたいときは、「custom_node」をひっぱって挿入してください。

管理バー設定例4
管理バー設定例4

どうですか?ごっごる(外部リンク)は表示されましたか?

管理バー設定例5
管理バー設定例5

次は、サイドメニューをカスタマイズします。

 

サイドメニュー

サイドメニュー設定
サイドメニュー設定

まずは、クライアント向けに必要の無い項目を削除していきます。

  • ダッシュボード > 更新
  • ダッシュボード > ホーム
  • 投稿 > タグ
  • リンク
  • コメント
  • 外観
  • プラグイン
  • ユーザー
  • ツール
  • 設定 > ディスカッションやらプライバシーやら

は必要ないとして、削除します。
(削除の仕方はさきほどのAdmin bar の時と一緒です。右の矢印をクリックして削除。追加するなら、右のメニュー一覧から引っ張ってメニューを追加)

あ、お好みで右のメニュー一覧より、区切り線(Separator)などをひっぱって挿入して、見やすくしてください。

サイドメニュー設定例1
サイドメニュー設定例1

さっぱりしました。あ、保存は忘れずに。

ただ、ここで注意して欲しい事があります。
それは、今の状態ではこのメニューの通りの表示にならないという事

なぜ?って思いますよね。

画面を見てもらったほうが一番分かりやすいと思いますので、前回作成したクライアント用アカウントでログインした画面を貼り付けます。

サイドメニュー表示例
サイドメニュー表示例

一瞬、出来てるじゃないか。って思いますが、よーく設定したメニューと見比べてください。
「設定」のメニューが無いのが分かりますか?

WordPressは各ユーザーに権限グループ(編集者とか管理者とか購読者とか)を振り分けることが出来ます。
この権限グループには予め、「設定や追加、編集できる項目」が決められています。(自分自身や他プラグインを利用して変更する事は可能です)

編集者にはもともと、「設定」を変更する権限を持っていません。

なので、作成したユーザー(編集者) では、 「設定」 は変更できない。
編集者には「設定」のサイドニューは表示されない

これを変更できるようにする為には、ユーザーの権限を変更するプラグイン等を用いて変更してください。ここでは例として、「User Role Editor」というプラグインを利用した場合の変更方法をご紹介します。

User Role Editor
※管理画面のプラグインからインストールしたほうが楽です。

userroleeditorメニュー
userroleeditorメニュー

インストールすると、
ユーザー > User Role Editor
のメニューが追加されているので、クリックしてください。

 

 

 

User Role Editor の設定画面になります。
まずはユーザー権限を選択します。
ここでは編集者を選択してください。

User Role Editor 設定画面
User Role Editor 設定画面

選択した途端、一瞬で画面が変わるので分かりづらいですが、チェックされている項目とチェックされていない項目がいくつかあります。今回は「設定」を表示したいので、「manage_options」という項目を探し、チェックをいれます。

manage_optionsチェック
manage_optionsチェック

これで、保存をして、編集者でログインすると…

サイドメニュー設定例3
サイドメニュー設定例3

サイドメニューに「設定」が表示されるようになりました。
追加メニューが表示されない等の場合は、このようにユーザーの権限を変更してみてください。

 

次は、「メタボックス削除」以降の設定例になります。

クライアントに納品するwordpressの管理画面カスタマイズ vol.3

 

クライアントに納品するWordPressの管理画面カスタマイズ vol.1

こんにちは。gqevu6bsiz です。 このページでは、クライアントにwordpressをCMSとして納品する際に、管理画面をカスタマイズして納品したい人で、あまりfunctions.phpに色々と書きたくない人や、何かを非表示にする際にしょっちゅうgoogleで検索してコピペするのが面倒な人向けに、gqevu6bsiz が作成したプラグインを利用して、おすすめのカスタマイズ法を紹介します。 Webの知識があまり無いクライアント様向けに、余計なものを触れないようにカスタマイズしたいWeb制作者を想定しています。

  1. クライアントに納品するwordpressの管理画面カスタマイズ vol.1 
  2. クライアントに納品するwordpressの管理画面カスタマイズ vol.2
  3. クライアントに納品するwordpressの管理画面カスタマイズ vol.3
  4. クライアントに納品するwordpressの管理画面カスタマイズ vol.4
  5. クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
  6. クライアントに納品するwordpressの管理画面カスタマイズ vol.5
  7. クライアントに納品するwordpressの管理画面カスタマイズ vol.6

 

 

カスタマイズ完成図

カスタマイズ完成イメージ
wordpressの管理画面カスタマイズイメージ図

だいぶシンプルにカスタマイズします。 基本的にクライアントには既存ページの更新(固定ページ)と、イベントや新商品の発表や新着情報を行う(投稿)ぐらいを想定しています。

まずは、wordpressをいつも通りにインストールしましょう。

とりあえず、wordpressをインストールします。 インストールが完了すると、すぐにログイン画面が出てくるのでログインします。

ログイン画面
ログイン画面

 

ログイン後、まずはクライアント向けの「ユーザー」を作成。

インストール後のwordpressは、ユーザーがadminしかありません。 クライアントにログインしてもらうアカウントは、この管理者用のアカウント「admin」とは別のアカウントを用意します。 ※この説明では、クライアント用アカウントの権限を「編集者」にします。

ユーザー作成後
ユーザー作成後

クライアント用ユーザー「編集者」を作成しました。 クライアント用ユーザーの管理画面のみカスタマイズをしていきます。

 

ここで、まずはプラグインをダウンロードしてください。

私のプラグインを利用した場合のカスタマイズ方法です。 管理画面のカスタマイズ用のプラグイン「WP Admin UI Customize」をインストールしてください。

プラグイン検索画面
プラグイン検索画面

インストールを終え、有効化すると、サイドメニューの「設定」の下に、「WP Admin UI Customize」のメニューが表示されますので、クリックしてください。

管理メニュー
管理メニュー

 

カスタマイズを適用する権限を選択

さきほどクライアント用のアカウントを「編集者」として作成しましたので、カスタマイズを適用する権限のグループから、「編集者」にチェックを入れて保存をクリックしてください。

権限グループの選択
カスタマイズを適用する権限グループを選択

※プラグインに満足いただけた場合、宜しければ寄付のご検討をお願いします。

「サイトの設定」はいまはおいといて、「管理画面設定」を選択

管理画面設定メニュー
管理画面設定メニュー

管理画面に関する、アップデートの通知やフッターに関する設定画面です。

管理画面設定
管理画面設定

 

通知

通知 WordPress コアアップデート通知

wordpress本体のアップデート通知を表示するかどうか。下の黄色帯のようなヤツ(複数そのような通知する箇所があります)。

コアアップデート通知
コアアップデート通知

 

プラグインアップデート通知

インストールしているプラグインで、有効にしているかどうかは関係なく、プラグインのアップデートがあれば、通知する機能

テーマアップデート通知

インストールしているテーマで、有効にしているかどうかは関係なく、テーマのアップデートがあれば、通知する機能   基本的にクライアントにこの全ての通知を表示する必要はないと思うので、全てにチェックをいれます。

 

表示オプションとヘルプタブ

表示オプションとヘルプタブ  表示オプション

投稿や固定ページなど、色んなページの右上にいるアイツです。これを表示したくない場合はチェック。 表示オプションとヘルプタブ位置

ヘルプ

表示オプションの隣にいるアイツです。こちらもいらないならチェック。

 

フッター

フッター部分のテキストを変更できます。HTMLタグも使用可能です。

フッター
フッター

ここではクライアント用に、お問い合わせ先を記載してみます。

フッター適用例
フッター適用例

 

一般

一般-css読み込み
一般-css読み込み

ここは管理画面に独自のCSSを読み込みたい場合にのみ使用します。試しに読み込んで使用してみます。 cssの内容は以下の内容です。(サンプルとして、サイドメニューの色を、オレンジにします。)

#adminmenuwrap { background-color: orange; }
css設置例
css設置例

このcssをコピペで作成して、ファイル名を「admin.css」とします。
このadmin.cssを、「themes」のディレクトリにアップロードします。

 

 

次に、このCSSまでのパスを記述します。WP Admin UI Customize はいくつかの変数(ショートコードみたいな)を使用できるようにしています。 アップロード先は wp-content / themes 内なので、[blog_url] 変数を利用して、

[blog_url]/wp-content/themes/admin.css

と記入します。

css読み込み例
css読み込み例

これで編集者の管理画面のみ、CSSが読み込まれます。先ほど書いたCSSが無事読み込まれると、

サイドメニューcss適用例
サイドメニューcss適用例

はい、なんとも見づらいメニュー色の設定ができました。(笑 あとは、お好みでCSSを適用させてください。   次は、「ダッシュボード」以降の設定例になります。

クライアントに納品するwordpressの管理画面カスタマイズ vol.2