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

管理画面のカスタマイズするところ、探せばたくさんありますね。

前回はクライアントに納品するwordpressの管理画面カスタマイズ vol.5 にて、クライアントへダッシュボードを使って、クライアントへのお知らせ表示をしました。

  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

 

今回は投稿画面のカスタマイズとなります。

デフォルト投稿編集画面
デフォルト投稿編集画面

この画面を、クライアント向けにカスタマイズする方法です。

 

まず最初。いらないものはレッツ削除。

すぐに思いつくものは「ヘルプタブ」という名称となるのかは分かりませんが、それ。

ヘルプタブ
ヘルプタブ

まずはこのヘルプタブを削除したいと思います。

今回は簡単にヘルプタブと表示オプションタブを削除することができるプラグイン「Screen Options and Help Show Customize」をインストールして有効化して、そこから削除の設定をしました。

※使い方はWordPress プラグイン Screen Options and Help Show Customizeをご覧下さい。一応使い方を見なくても簡単に設定できるようには作っています。

 

できましたか?ついでに表示オプションも必要ないなら一緒に削除してもいいと思います。

ヘルプタブ削除後
ヘルプタブ削除後

あ、必要の無いメタボックス(タグとかスラッグとかリビジョンとか)は、表示オプションタブを削除する前に非表示にして、表示オプションタブを削除すると良いと思います。

 

投稿画面カスタマイズの本題、ビジュアルエディタ

ちなみに、デフォルトのテーマ(TwentyTwelve)でのビジュアルエディタはこうですね。

ビジュアルエディタ-デフォルト
ビジュアルエディタ-デフォルト

 

H2タグやH3タグやul liタグなど、このような表示です。

ちなみに、フロントのサイト(一般のユーザーが見るサイト)のデザインを変更(style.css)しても、このビジュアルエディタの部分は変更されません。

ビジュアルエディタのCSSは別で用意されている為です。

で、このビジュアルエディタのH2などの部分にも、デザインが適用されるようにカスタマイズしていきます。

 

先に

フロントサイトのコンテンツ部分のCSSを以下のように設定しました。

.entry-content {
 background: rgba(0, 0, 0, 0.06);
 padding: 20px;
}
.entry-content h2 {
 font-size: 30px;
 line-height: 38px;
 background: rgba(195, 87, 0, 0.4);
 padding: 8px 22px;
}
.entry-content h3 {
 font-size: 22px;
 line-height: 28px;
 background: rgba(25, 100, 128, 0.4);
 padding: 8px 22px;
}
.entry-content h4 {
 font-size: 18px;
 line-height: 26px;
 padding: 8px 22px;
 color: green;
}
.entry-content ul {
 margin: 0;
 paddign: 0;
}
.entry-content ul li {
 color: red;
}

 

で、このCSSと同じものを、ビジュアルエディタにもこれから適用していきます。

デフォルトのテーマのままだと、黒字しかないので上手く適用されているのか分からなかったので、上記はCSSが適用されているどうか分かりやすいようh2やh3の背景色を適当に変更しています。

デザイン変更後のフロント
デザイン変更後のフロント

 

フロントのコンテンツ部分はこれでCSSが適用されている事が分かりました。

次に、本題のビジュアルエディタのCSS設定です。

 

デフォルトテーマ(TwentyTwelve)のfunctions.phpをくまなく探せば分かりますが、適用するためにはまず、

add_editor_style();

という関数を、functions.phpに記載します。

※フックを用いて実行させてください。具体的には例えば↓

function mytheme_setup() {
  add_editor_style();
}
add_action( 'after_setup_theme', 'mytheme_setup' );

 

実行すると、テーマディレクトリ内のeditor-style.cssというCSSファイルをビジュアルエディタに読み込む設定をしてくれます。

あとは単純に、テーマディレクトリ内にeditor-style.cssというファイルが無ければご自身で作成して、上記のCSSを適用すればOKです。

※注意 : ビジュアルエディタ内に entry-content というクラスはありません。

なので、.entry-content となっている部分を、ビジュアルエディタ内の mceContentBody クラスなどに変更してください。

 

たまに記述したCSSが適用されない場合があります。
この場合は、ファイル名が微妙に間違っているか、キャッシュが原因だったりします。

ブラウザのF5や更新ボタンを押しても、なかなか更新されない場合もあります。

その場合は、キャッシュを削除するか、スタイルシートを直接ブラウザから一度開いてください。

chromeでのスタイルシート読み込み一覧
chromeでのスタイルシート読み込み一覧

キャッシュが残っていると、ファイルを開くと真っ白だったり古いCSSの記述だったりします。この場合はキャッシュが原因なので、ここで更新をし、CSSファイルの内容が変われば、ビジュアルエディタにも記述したCSSが適用されます。

ビジュアルエディタへのCSS適用後
ビジュアルエディタへのCSS適用後

これでビジュアルエディタにもフロントサイトと同じようにCSSの適用ができました。

これで完了!

と思います。

 

が、よーく考えて下さい。フロントサイトのCSSを触る時って、これからも発生しますよね。

だとすると、同じようにeditor-style.cssも触らないと同じデザインが適用されません。

同じスタイルを適用するだけなのに、もう一度同じような事をする…。ちょっと手間ですね。 😕

 

ビジュアルエディタとコンテンツ部分のCSS適用が1箇所で済めばいいのに。

と思った方は、以下の続きの記事は参考になると思います。

ということで次は、ビジュアルエディタのCSSとフロントサイトのCSSをひとつにまとめる(コンテンツ部分のスタイルを一つにまとめる)方法です。

 

ビジュアルエディタとフロントサイト共通のCSS

どちらにも読み込む為のCSSファイルを先に作成します。

今回は front-content.css というファイルを、コンテンツ部分共通のCSSとして使うことを想定して進めます。

先ほど、ビジュアルエディタにCSSを適用する方法として、 add_editor_style() を使用しましたが、もうひとつこの front-content.cssを読み込ませます。

function mytheme_setup() {
  add_editor_style();
  add_editor_style( "front-content.css" );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

※@importでCSSファイルを読めばいいじゃないか。と思われる方もいるかと思いますが、importだとブラウザのパフォーマンスに影響が出るという事例もあったりするので、今回は追加で読み込ませる方法をとっています。
ご自身のお好みの方法で読み込ませて下さい。

これで、ビジュアルエディタに「editor-style.css」「front-content.css」の2つのCSSが読み込まれるようになりました。

もともとのeditor-style.cssはビジュアルエディタのCSSをリセットする目的等で使用されるといいと思います。

先ほどの、ビジュアルエディタに適用させていたCSSを、front-content.cssに記述します。

が、両方のコンテンツ部分に適用させるために、合体? 😎 させます。

front-content.css

.entry-content, .mceContentBody {
 background: rgba(0, 0, 0, 0.06);
 padding: 20px;
}
.entry-content h2, .mceContentBody h2 {
 font-size: 30px;
 line-height: 38px;
 background: rgba(195, 87, 0, 0.4);
 padding: 8px 22px;
}
.entry-content h3, .mceContentBody h3 {
 font-size: 22px;
 line-height: 28px;
 background: rgba(25, 100, 128, 0.4);
 padding: 8px 22px;
}
.entry-content h4, .mceContentBody h4 {
 font-size: 18px;
 line-height: 26px;
 padding: 8px 22px;
 color: green;
}
.entry-content ul, .mceContentBody ul {
 margin: 0;
 paddign: 0;
}
.entry-content ul li, .mceContentBody ul li {
 color: red;
}

ビジュアルエディタで問題なくCSSが読み込まれましたか?

問題が無ければ、あとはフロントサイトにも追加でfront-content.cssを読み込ませてください。

header.phpに書くなり、wp_headerにフックさせるなりで適用させれば、コンテンツ部分のCSSの管理が1箇所で管理できるようになります。

私はたまにやってしまいますが、

フロントサイトのCSSは設定したが、ビジュアルエディタには適用してなかった。。 😥

なんて事には、多少はなりづらくなると思うのでおすすめです。

 

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 プラグイン Post Lists View Custom 1.2.1

※先ほどアップデートした、1.2をお使いの方へ。
すいません、画像を表示させる項目を忘れていました。

投稿や固定ページ、カスタム投稿タイプの一覧表示をカスタマイズする、

Post Lists View Custom

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

 

やったこと

画像を表示させる項目が無かったので、追加しました。
これで、大丈夫かな。

 

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

 

もしくは、管理画面のプラグインから、「Post Lists View Custom」と検索して、インストールしてください。

 

wordpress プラグイン Screen Options and Help show Customize

このプラグインは、wordpressの管理画面に出ている「表示オプション」と「ヘルプ」のタブを、

削除してしまおうというプラグインです。

クライアントにCMSとして提供している場合、あまり余計なものは載せたくない….。

そういう時に便利なプラグインです。

※ユーザーの権限別に表示・非表示を変更できます。例えば、編集者だけ新規投稿ヘルプは表示しない。とかですね。

 

以前作成した、「dashboard-option-menu-customize 」プラグインにとても似ていますが、このプラグインは、ダッシュボード以外のページの表示オプションとヘルプの表示変更をできるようにしたものです。

ダッシュボードの表示オプションとヘルプ表示だけ、変更したい方は「dashboard-option-menu-customize 」のほうがいいかもしれません。

 

 

とりあえずこんな感じです。

screen option and help show customize 使用例

 

 

 使い方



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

>> ダウンロード

次に、プラグインを wp-content/plugins/ 内に解凍してアップロードしてください。

プラグインのパネルで有効化してください。
Screen Options and Help show Customize 設定メニュー
すると、「設定」 メニューより 「オプションタブ表示カスタマイズ」のメニューが選択できますので、選択してください。
Screen Options and Help show Customize の設定画面になります。

「ダッシュボード」や「投稿一覧」のタブだけがあります。そこから、オプション表示とヘルプの表示設定を変更したい所を選び、クリックすると設定変更が可能になります。

screen option and help show customize 設定画面

 ※キャプチャは英語ですが、日本語のwpだと日本語表示になりますのでご安心ください。

 

あとは、設定して一番下のほうにある更新ボタンを押して、設定通りの表示になっているかどうか確認ください。

以上になります。

 

wordpressプラグイン POST-CATEGORY-HEIGHT-EDIT

なんとなくこのプラグイン名から想像がつくかと思いますが、

wordpressの投稿の編集、投稿の新規追加の画面内の、カテゴリーを選ぶ窓を

もっと使いやすく出来るように(といってもただ伸ばすだけ)した、

機能的には超シンプル過ぎて、本当にプラグインにすべきなのか?!

といったプラグインです。

 

とりあえずこんな感じです。

カテゴリ数が多くなると、下のほうにあるカテゴリを選択する際に、わざわざスクロールするのが

いつも手間で手間でしょうがありませんでした。

かといって、カテゴリの枠を大きく”固定(たとえば縦幅1000pxとか)”にすると、

カテゴリもサイトを運営していくにつれて増えていくはずで、固定にすると面倒だと思い、

利用する時に自由に変更できるようにした、プラグインになります。

 

 使い方

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

>> ダウンロード

次に、プラグインを wp-content/plugins/ 内に解凍してアップロードしてください。

プラグインのパネルで有効化をすると、既に使える状態になっていますので、

記事投稿画面からカテゴリの高さをお好みに変更してください。

以上になります。

 

※注意※

  • 注意とまではいきませんが、このプラグインは jquery jquery-ui-resizable を使用しているので、管理画面を直接いじってjquery系を読み込まないような設定にしている場合は動作不可となります。
  • カテゴリの高さを変更したその日から、7日間だけ高さの設定を保存しています。(Cookieを使用)7日間以上経つと、元の高さに戻っているのでその際は再度高さを変更してください。