こんにちは。gqevu6bsiz です。 このページでは、クライアントにwordpressをCMSとして納品する際に、管理画面をカスタマイズして納品したい人で、あまりfunctions.phpに色々と書きたくない人や、何かを非表示にする際にしょっちゅうgoogleで検索してコピペするのが面倒な人向けに、gqevu6bsiz が作成したプラグインを利用して、おすすめのカスタマイズ法を紹介します。 Webの知識があまり無いクライアント様向けに、余計なものを触れないようにカスタマイズしたいWeb制作者を想定しています。
- クライアントに納品するwordpressの管理画面カスタマイズ vol.1
- クライアントに納品するwordpressの管理画面カスタマイズ vol.2
- クライアントに納品するwordpressの管理画面カスタマイズ vol.3
- クライアントに納品するwordpressの管理画面カスタマイズ vol.4
- クライアントに納品するwordpressの管理画面カスタマイズ vol.4.5
- クライアントに納品するwordpressの管理画面カスタマイズ vol.5
- クライアントに納品するwordpressの管理画面カスタマイズ vol.6
カスタマイズ完成図
![カスタマイズ完成イメージ](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/0eba6744a4b1ab0d9b633aabe2910703.png?resize=300%2C122&ssl=1)
だいぶシンプルにカスタマイズします。 基本的にクライアントには既存ページの更新(固定ページ)と、イベントや新商品の発表や新着情報を行う(投稿)ぐらいを想定しています。
まずは、wordpressをいつも通りにインストールしましょう。
とりあえず、wordpressをインストールします。 インストールが完了すると、すぐにログイン画面が出てくるのでログインします。
![ログイン画面](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/ec4eb80b767c5293f2aa9e8ba33eeb6f.png?resize=365%2C360&ssl=1)
ログイン後、まずはクライアント向けの「ユーザー」を作成。
インストール後のwordpressは、ユーザーがadminしかありません。 クライアントにログインしてもらうアカウントは、この管理者用のアカウント「admin」とは別のアカウントを用意します。 ※この説明では、クライアント用アカウントの権限を「編集者」にします。
![ユーザー作成後](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/59762205682c09426b8bf1916162f582.png?resize=656%2C337&ssl=1)
クライアント用ユーザー「編集者」を作成しました。 クライアント用ユーザーの管理画面のみカスタマイズをしていきます。
ここで、まずはプラグインをダウンロードしてください。
私のプラグインを利用した場合のカスタマイズ方法です。 管理画面のカスタマイズ用のプラグイン「WP Admin UI Customize」をインストールしてください。
![プラグイン検索画面 プラグイン検索画面](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2012/12/ae46b1f460ee46f789c27b264a6cb4211.png?resize=756%2C271&ssl=1)
インストールを終え、有効化すると、サイドメニューの「設定」の下に、「WP Admin UI Customize」のメニューが表示されますので、クリックしてください。
![管理メニュー](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2012/12/552eb4aed1593e952e7a12c7b8a0e9e11.png?resize=168%2C258&ssl=1)
カスタマイズを適用する権限を選択
さきほどクライアント用のアカウントを「編集者」として作成しましたので、カスタマイズを適用する権限のグループから、「編集者」にチェックを入れて保存をクリックしてください。
![権限グループの選択](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/8b32a6947a98638b4b959533c14b044d.png?resize=770%2C473&ssl=1)
※プラグインに満足いただけた場合、宜しければ寄付のご検討をお願いします。
「サイトの設定」はいまはおいといて、「管理画面設定」を選択
![管理画面設定メニュー](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/149aaba2be0591dc52e0090384af7a85.png?resize=341%2C195&ssl=1)
管理画面に関する、アップデートの通知やフッターに関する設定画面です。
![管理画面設定](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2012/12/5a497226e54ffd4d3a77fdc9f34d91c9.png?resize=625%2C701&ssl=1)
通知
wordpress本体のアップデート通知を表示するかどうか。下の黄色帯のようなヤツ(複数そのような通知する箇所があります)。
![コアアップデート通知](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/331b2faf3141f8c356eb6e263fd8e3c0.png?resize=771%2C36&ssl=1)
プラグインアップデート通知
インストールしているプラグインで、有効にしているかどうかは関係なく、プラグインのアップデートがあれば、通知する機能
テーマアップデート通知
インストールしているテーマで、有効にしているかどうかは関係なく、テーマのアップデートがあれば、通知する機能 基本的にクライアントにこの全ての通知を表示する必要はないと思うので、全てにチェックをいれます。
表示オプションとヘルプタブ
投稿や固定ページなど、色んなページの右上にいるアイツです。これを表示したくない場合はチェック。
ヘルプ
表示オプションの隣にいるアイツです。こちらもいらないならチェック。
フッター
フッター部分のテキストを変更できます。HTMLタグも使用可能です。
![フッター](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/a973b7ae55cbe0e65458940c32d5f35c.png?resize=595%2C132&ssl=1)
ここではクライアント用に、お問い合わせ先を記載してみます。
![フッター適用例](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/5a0d1c45dd67c79d99d76ff728e8865d.png?resize=747%2C501&ssl=1)
一般
![一般-css読み込み](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/22c5a6bedd6055fa62227af935d311c9.png?resize=744%2C106&ssl=1)
ここは管理画面に独自のCSSを読み込みたい場合にのみ使用します。試しに読み込んで使用してみます。 cssの内容は以下の内容です。(サンプルとして、サイドメニューの色を、オレンジにします。)
#adminmenuwrap { background-color: orange; }
![css設置例](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/3015acb2ebaac9ee9c000476bc26c2b3.png?resize=124%2C102&ssl=1)
このcssをコピペで作成して、ファイル名を「admin.css」とします。
このadmin.cssを、「themes」のディレクトリにアップロードします。
次に、このCSSまでのパスを記述します。WP Admin UI Customize はいくつかの変数(ショートコードみたいな)を使用できるようにしています。 アップロード先は wp-content / themes 内なので、[blog_url] 変数を利用して、
[blog_url]/wp-content/themes/admin.css
と記入します。
![css読み込み例](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/baa6ce2a65b58ab586e44c6f13521968.png?resize=733%2C109&ssl=1)
これで編集者の管理画面のみ、CSSが読み込まれます。先ほど書いたCSSが無事読み込まれると、
![サイドメニューcss適用例](https://i0.wp.com/gqevu6bsiz.chicappa.jp/wp-content/uploads/2013/02/5e57c3da3fddd0713005db049d24bca2.png?resize=159%2C367&ssl=1)
はい、なんとも見づらいメニュー色の設定ができました。(笑 あとは、お好みでCSSを適用させてください。 次は、「ダッシュボード」以降の設定例になります。
クライアントに納品するwordpressの管理画面カスタマイズ vol.2
コメントを残す