web-dev-qa-db-ja.com

.phpファイルを使用せずにワードプレスの投稿エディタにカスタムのCSSとJSを直接追加する方法

私は私のホームページエディタにいくつかのCSSおよびJSコードをwp-adminで追加しようとしています。

私は単純に使っています

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('.x-feature-box').each(function() {
    var self = $(this),
        icon_href = self.find('.x-feature-box-text a:last-child').attr('href');
    if ( icon_href.length > 0) {
      $(self).find('.x-feature-box-graphic-inner > *').wrap(function() {
        return '<a href="' + icon_href + '" target="_parent"></a>';
      });
    }
  });
});
</script>

<style id="cornerstone-custom-page-css" type="text/css">
.maps iframe{
    pointer-events: none;
}

p.x-feature-box-text a{
  font-size:1.5em !important;
  color:white !important;
}
.x-text{color:rgb(250, 250, 250)}
</style>

エディタのコンテンツの上部にあります。 Javascriptは機能していますが、cssは機能していません。このコードはすべてのcssファイルの末尾で呼び出されるのではなく、代わりにcssファイルの上にロードされるためです。

また、フックと同じように、これらのコードを適切な場所に追加する必要があります。 bodyタグの真上を意味します。

そして私がこのコードを追加しようとしているとき、それは<p>タグの中に入ってきて、それが私のフロントエンドページのスペースを増やしています。

その方法がわかりませんが、これは私にとって非常に重要です。助けてください。

customizationwp-admincssjavascripteditor
1
Bhuvnesh Gupta

あなたのスクリプトがあなたの投稿に機能するのはあなたがあなたのコンテンツにunfiltered_htmlを挿入する管理者としての能力を持っているからです。スクリプトを挿入した後、またはDOMの準備ができたときにスクリプトの関数を呼び出しても、うまくいきます。しかしCSSの場合は、ページがロードされたときにスタイルを適用できるように、<head>でレンダリングする必要があります。ページが読み込まれると、あなたのスタイルはもう適用されません（何らかのjavascript/jQueryを使わない限り）。

現在、これは主にテーマに依存していますが、一部のテーマ開発者はテーマ設定ページまたは投稿/ページのメタボックスを通じて、テーマのヘッダー/フッターにcss/javacsriptを追加することができます。

これは、設定ページにコードを追加したときにそのコードがそれらのフックによって呼び出されるようにするためです。

そのため、テーマ開発者が自分のスタイルやスクリプトをカスタマイズするために必要なフックをデザインに組み込んでいない場合、これを実現することは実際には不可能です。そのためには、style.cssファイルとfunctions.phpファイルを編集する必要があります。

1
bynicolas