jQueryで、非プラグイン要素を各プラグインの間に挿入する方法

プラグインを使わずに、プラグインカテゴリ1内の各プラグイン間の好きなところに「プラグインでない要素(任意の広告など)」を挿入する方法です。当サイト作者が作成したテンプレートである valid-seo-2c と valid-seo-3c のver1.0.1までについてです。

概要

  1. HTMLとCSSの編集だけでは、プラグインカテゴリ内の任意の場所にプラグインでない要素(以下、「非プラグイン要素」という)を挿入できません。当サイトの管理人が知らないだけかもしれませんが。

  2. 非プラグイン要素をプラグインカテゴリ1の一番下に追加し、jQueryで順番を入れ替えます。結果として、各プラグイン間の好きなところに非プラグイン要素を挿入できます。

  3. 編集する場所は次のとおり2箇所です。

  4. JavaScriptが有効でないブラウザでは、プラグイン間に表示されずプラグインカテゴリ1の一番下に表示されます。

  5. このページで紹介する方法は、サイドバーにプラグイン以外の項目(広告など)を表示する方法の応用です。

  6. プラグインカテゴリ2で同様のことをする場合は、#primaryを#secondaryと読み替えればだいたいOKです。

テンプレートのHTMLを編集

#primary内に挿入したい要素を追記する

  1. テンプレートのHTMLで、#primary内の下図で示した箇所(</div><!-- /#primary -->)の上に挿入したい非プラグイン要素を追記します。参考:サイドバーにプラグイン以外の項目(広告など)を表示する方法

    valid-seo-101-insert-not-plugin-1.png
  2. 下図のとおり、ここでは#primaryの子要素として次の5つの要素を追加しました。

    • <dl>要素
    • <dl>要素
    • <div>要素
    • <div>要素
    • <div>要素
    valid-seo-101-insert-not-plugin-3.png
  3. この段階でプレビューすると、下図のようになっています。プラグインカテゴリ1にはプラグインが3つあり、その下に非プラグイン要素が5つあります。下図内の黄色の数字は、#primaryの子要素としての順番です。

    valid-seo-101-insert-not-plugin-4.png

<head>内でjQueryを読み込み、要素の順番を指定する

一箇所に挿入する場合

  1. #primaryの4番目6番目の子要素を、1番目の子要素(検索フォーム)の次に挿入してみます。

  2. テンプレートのHTMLで、</head>の上に下記コードを追加します。コードの1行目でjQueryを読み込み、それ以降の行で処理を記述しています。具体的には次のとおりです。

    1. 最初のnth-child(1)の数字が挿入する場所を指定しています。この場合「1番目の子要素」という意味です。数字を「1」から「2」に変えると、#primaryの2番目の子要素の次に、挿入したい子要素が挿入されます。
    2. nth-child(4)nth-child(6)内の数字が、挿入される(入れ替えられる)方の子要素を指定しています。
    3. afterbeforeに変えると、挿入される場所が「1番目の子要素の」になります。
    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
     $("#primary > :nth-child(1)").after(
      $("#primary > :nth-child(4)"),
      $("#primary > :nth-child(6)")
     );
    });
    </script>
    
    valid-seo-101-insert-not-plugin-5.png
  3. 下図のとおり、子要素の入れ替えが行われました。

    valid-seo-101-insert-not-plugin-6.png
  4. #primaryの4番目5番目6番目の子要素の3つを、1番目の子要素(検索フォーム)の次に挿入する場合のコードは次のとおりです。上記コードに赤文字の部分が追加されただけです。行最後のコンマの付け忘れなどに注意です。

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
     $("#primary > :nth-child(1)").after(
      $("#primary > :nth-child(4)"),
      $("#primary > :nth-child(5)"),
      $("#primary > :nth-child(6)")
     );
    });
    </script>
    

複数ヶ所に挿入する場合

  1. #primaryの4番目の子要素を1番目の子要素(検索フォーム)の次に挿入し、6番目の子要素を2番目の子要素(カテゴリ)の次に挿入してみます。

  2. テンプレートのHTMLで、</head>の上に下記コードを追加します。

    
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(function(){
     $("#primary > :nth-child(1)").after(
      $("#primary > :nth-child(4)")
     );
     $("#primary > :nth-child(3)").after(
      $("#primary > :nth-child(6)")
     );
    });
    </script>
    
  3. 上記コードで注意すべき点はnth-child(3)です。6番目の子要素を2番目の子要素(カテゴリ)の次に挿入するのなら、nth-child(2)と書きそうですがそうではありません。

  4. その理由は、nth-child(1)の次に既にnth-child(4)が挿入された後に処理されるので、2番目の子要素(カテゴリ)だったものが3番目になっているからです。ここらへんは、いろいろ試行錯誤している内に慣れてくるとおもいます。

その他

  1. 一箇所に挿入する場合は、jQueryを使わずにプラグインカテゴリ3を有効活用することで同じようなことが実現できます。プラグインカテゴリ1とプラグインカテゴリ3を連続して記述し、その間に非プラグイン要素を記述します。

  2. 公式プラグインのフリーエリアを有効活用すれば、プラグイン間の任意の場所に好きな記述が可能です。

他サイトの参考になるページへのリンクです。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)