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

コメント

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

1. 

   kenbo

   2013年4月15日

   ありがとうございました！！とても参考になりました。

   返信
2. 

   坂井

   2013年5月5日

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

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

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

   返信
   1. 

      gqevu6bsiz

      2013年5月6日

      坂井さん

      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. 

         坂井

         2013年5月6日

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

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

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

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

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

         返信
         1. 

            gqevu6bsiz

            2013年5月7日

            坂井さん

            まずは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. 

               坂井

               2013年5月7日

               ありがとうございます。

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

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

               返信
               1. 

                  gqevu6bsiz

                  2013年5月7日

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

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

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

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

                  返信
            2. 

               坂井

               2013年5月8日

               ＞お問い合わせのhead_link部分にfloat right、

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

               返信
               1. 

                  gqevu6bsiz

                  2013年5月8日

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

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

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

                  返信
            3. 

               坂井

               2013年5月8日

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

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

               #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;
               }

               返信
               1. 

                  gqevu6bsiz

                  2013年5月8日

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

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

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

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

                  返信
3. 

   坂井

   2013年5月16日

   ありがとうございます。

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

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

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

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

   返信
   1. 

      gqevu6bsiz

      2013年5月17日

      私の記事ではないですが、
      投稿画面のウェジェットを2列にする
      が参考になるのではないでしょうか？

      返信
      1. 

         坂井

         2013年5月20日

         行けました
         ありがとうございます！！

         返信
         1. 

            gqevu6bsiz

            2013年5月20日

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

            返信