クライアントに納品する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 にて、投稿画面のカスタマイズとなります。

 

“クライアントに納品するWordPressの管理画面カスタマイズ vol.5” への 15 件のフィードバック

  1. 4.5の記事を読ませて頂きました。

    >まずは、javascriptファイルを読み込ませる為に、functions.phpに以下を記載。

    このjsを読み込ませるというところから先に進めないです。
    テストのjsすら読み込まないのですが、なにが原因かわからないです。
    どうすればいいでしょうか。

    1. 坂井さん

      jsファイルを読み込まない。との事ですが考えられる原因として

      • jsファイルの読み込み指定の間違い
      • jsファイルの設置階層の間違い
      • wordpressのバージョン違い
      • jqueryが読み込まれていない

      が考えられます。

      まずは、ログインページのソースから、指定したjsファイルの読み込み記述があるかどうか確かめてみて下さい。
      例えばfunctions.phpに、

      function mylogin() {
      wp_enqueue_script( 'my-login-js' , '/my-login.js' , array( 'jquery' ) );
      }
      add_action( 'login_head' , 'mylogin' );

      このように記述すると、
      <script type=’text/javascript’ src=’サイトURL/my-login.js?ver=****’></script>
      のような読み込み指定が追加されます。

      また、Wordpressのバージョンは最新を使用して試してみてください。

      1. ご回答ありがとうございます。

        jsを読み込む事が出来ました。

        その後、一通りの流れは全て反映出来ている感じなのですが、画像を差し替えても反映されない等の状態になっています。

        キャッシュ関係のプラグインは一切入れず、wordpressインストール時のまっさらな状態で今回は実施しています。

        あと、出来上がりの状態がフォームの部分等が透明になっていなかったりするのですがこれはどうすればいいのでしょうか。出来上がりのサンプル版があれば頂けると嬉しいです。

        1. 坂井さん

          まずはjsファイルが読み込まれたようでよかったです。 🙂

          画像を差し替えても反映されない等の状態

          こちらの状況ですが、wordpressのキャッシュではなく、ブラウザのキャッシュの可能性が高いです。

          • 「Ctlr」+「F5」(スーパーリロード)でキャッシュを更新
          • 直接ブラウザのアドレスバーに画像ファイルへのURLを打ち込んで、一度その画像を表示して更新ボタンを押す

          等をしてみてください。

          あと、出来上がりの状態がフォームの部分等が透明になっていなかったりするのですがこれはどうすればいいのでしょうか。出来上がりのサンプル版があれば頂けると嬉しいです。

          こちらは、フォームの背景色をRGBAで指定しただけです。
          rgbaでの背景色の指定は、全てのブラウザで表示される訳ではないと思いますので、あまりおすすめはできませんが、一応CSSの設定を記述しますね。
          薄い白のpng画像をリピートさせた指定のほうが、より多くのブラウザで表示されるかもしれません。


          body.login {
          background: #fff;
          }
          #login {
          width: 950px;
          margin: 0 auto;
          padding: 10px 0;
          }
          #login h1 {
          padding: 18px 0;
          float: left;
          }
          #login h1 a {
          width: 141px;
          height: 36px;
          background-image: url(./logo.png);
          background-size: auto;
          padding: 0;
          }
          #login h1 a:hover {
          background-image: url(./logo_hover.png);
          }
          #login .head_link {
          float: right;
          width: 270px;
          padding: 24px 14px 0;
          text-align: right;
          }
          .login form {
          width: 275px;
          margin: 10px 10px 0 auto;
          background-color: rgba(255, 255, 255, 0.8);
          }
          .login #nav, .login #backtoblog {
          width: 275px;
          margin: 10px 10px 0 auto;
          }
          .login .footer {
          width: 950px;
          margin: 0 auto;
          text-align: center;
          border-top: 1px solid #777;
          padding: 10px 0 12px;
          }
          .my-login-form {
          width: 950px;
          height: 480px;
          background: url(./login_bg.png) no-repeat 0px 0px;
          padding-top: 1px;
          }
          .login #loginform p {
          position: relative;
          }
          .login #loginform p label span {
          position: absolute;
          font-size: 16px;
          top: 10px;
          left: 8px;
          }
          .login #loginform .user_pass {
          width: 70%;
          float: left;
          }

          1. ありがとうございます。

            話は少し戻るのですが、141*36のロゴ隣に置いた「お問い合わせ」を右側に移動するのが上手く行かないです。

            コードをそのままコピーしました。

          2. 141*36のロゴ隣に置いた「お問い合わせ」を右側に移動するのが上手く行かないです

            この情報だけではちょっと原因を特定するのが難しいですが、とにかく、

            h1部分にfloat left
            お問い合わせのhead_link部分にfloat right

            がきちんと適用されているかどうか、chromeのデバッグ等で確認してみてください。

          3. >お問い合わせのhead_link部分にfloat right、

            chromeでみたところ上記が反映されていませんでした。
            どうすればいいでしょうか。

          4. そうですね。
            考えられる原因としては、

            • flota 等のスペルミス
            • classとidミス
            • 大枠のdiv名が違う(ここでは #login)
            • class名のスペルミス(css・jsともに)
            • ブラウザのキャッシュ

            という所じゃないかと思います。
            head_linkにfloat以外のプロパティ(font-sizeやbackground等変更が分かりやすいもの)を試してみてください。
            float だけが反映されないのか、head_linkに適用するスタイル全てが反映されないのか、原因がより分かるようになると思います。

          5. すいませんちょっと見て頂いてもよろしいでしょうか。

            —————————————–

            #login {
            width: 950px;
            margin: 0 auto;
            padding: 10px 0;
            }

            #login h1 a {
            width: 141px;
            height: 36px;
            background-image: url(./logo.png);
            background-size: auto;
            padding: 0;
            }

            #login h1 a:hover {
            background-image: url(./logo_hover.png);
            }

            #login h1 {
            padding: 18px 0;
            }

            .login form {
            width: 275px;
            margin: 10px 10px 0 auto;
            }

            .login #nav, .login #backtoblog {
            width: 275px;
            margin: 10px 10px 0 auto;
            }

            .login .footer {
            width: 950px;
            margin: 0 auto;
            text-align: center;
            border-top: 1px solid #777;
            padding: 10px 0 12px;
            }

            #login .head_link {
            float: right;
            width: 270px;
            padding: 24px 14px 0;
            text-align: right;
            }

            #login h1 {
            padding: 18px 0;
            float: left;
            }

            .my-login-form {
            width: 950px;
            height: 480px;
            background: url(./login_bg.png) no-repeat 0px 0px;
            }

            .my-login-form {
            width: 950px;
            height: 480px;
            background: url(./login_bg.png) no-repeat 0px 0px;
            padding-top: 1px;
            }

            .login #loginform p {
            position: relative;
            }

            .login #loginform p label span {
            position: absolute;
            font-size: 16px;
            top: 10px;
            left: 8px;
            }

            .login #loginform .user_pass {
            width: 70%;
            float: left;
            }

            body.login {
            background: #fff;
            }

            #login {
            width: 950px;
            margin: 0 auto;
            padding: 10px 0;
            }

            #login h1 {
            padding: 18px 0;
            float: left;
            }

            #login h1 a {
            width: 141px;
            height: 36px;
            background-image: url(./logo.png);
            background-size: auto;
            padding: 0;
            }

            #login h1 a:hover {
            background-image: url(./logo_hover.png);
            }

            #login .head_link {
            float: right;
            width: 270px;
            padding: 24px 14px 0;
            text-align: right;
            }

            .login form {
            width: 275px;
            margin: 10px 10px 0 auto;
            background-color: rgba(255, 255, 255, 0.8);
            }

            .login #nav, .login #backtoblog {
            width: 275px;
            margin: 10px 10px 0 auto;
            }

            .login .footer {
            width: 950px;
            margin: 0 auto;
            text-align: center;
            border-top: 1px solid #777;
            padding: 10px 0 12px;
            }

            .my-login-form {
            width: 950px;
            height: 480px;
            background: url(./login_bg.png) no-repeat 0px 0px;
            padding-top: 1px;
            }

            .login #loginform p {
            position: relative;
            }

            .login #loginform p label span {
            position: absolute;
            font-size: 16px;
            top: 10px;
            left: 8px;
            }

            .login #loginform .user_pass {
            width: 70%;
            float: left;
            }

          6. お書きいただいたCSSを、丸久コピペしてみましたが期待通りの動作でした。

            となると、CSSファイル以外の部分で

            • classとidミス
            • 大枠のdiv名が違う(ここでは #login)
            • class名のスペルミス(jsファイル)
            • ブラウザのキャッシュ

            が怪しいと思いますので、ここを見直してみてください。
            javascriptファイルはアップしておきます。
            javascriptファイル

  2. ありがとうございます。

    無事、上手く設定が出来ました。

    別件になるのですが、投稿画面のカスタマイズについてです。

    不要なコンテンツ(タグやらリビジョンやら)を非表示にするだけではなく、デザインを変更する事は出来ないのでしょうか。

    通常ですと、コンテンツエリアを左側、カテゴリやら属性やらのウィジェットを右側、という2カラム構成ですが、それぞれの幅を変えたり、3カラムにしてみたり等のカスタマイズです。

        1. おぉ、良かったですね!
          では、また何かありましたらコメントなどよろしくです。

コメントを残す