要素を移動・複製する方法
- WordPressで自動生成される目次を複製して他のウィンドウにも使用したい。
- Shareアイコンを自作のウィンドウに格納したい。
ココがポイント
結論：
JavaScriptで、HTMLの内容を複製、または移動できるメソッド「prepend()、clone()、appendTo()」を利用する。
皆様こんにちは。ユウスケと申します。
日々の生活で役立つ情報を発信しています。
皆様は、WordPressを利用していると、とても便利なプラグインがあり、そのプラグインから自動生成されるHTMLの要素を別のウィンドウに複製、または移動して流用したいと思ったことはございませんか？
今回は、JavaScriptをつかって、自作したウィンドウにお好みの要素を複製・移動する方法をご紹介しようと思います。
目次
1.「メソッド」とは
メソッドとは、あるオブジェクトに結びつけられた関数のことです。JavaScriptやjQueryにはあらかじめ登録されている関数があります。その中から、目的のアクションをする関数を呼び出すことで、お好みのプログラムを組んでいきます。
2.WordPressでjQueryを使用できるようになるプラグイン
プラグイン「Simple Custom CSS and JS」をインストールすると、WordPressでJavaScriptを追加することができます。また、jQueryを呼び出すコードを記述することで、jQueryの記述も行えるので、大変便利なプラグインになります。インストールされていないかたは是非、この機会にインストールしてみてはいかがでしょうか？
もっと詳しく
3.メソッド「clone()」「appendTo()」を使用して、要素を複製
See the Pen
prepend_menu by 三好雄介 (@yusuke5028198)
on CodePen.
3.1_要素を複製するJavaScript
$('#toc_container').clone().appendTo('#nav-menu .content');
メソッド「clone()」で、要素のクローンを作成し、そのクローンを選択状態にする。
メソッド「appendTo(content)」で、要素の中身を他の要素に追加する。例えば $(A).append(B) とした場合にAにBが追加されるのに対して、$(A).appendTo(B) ではBにAが追加される。
4.メソッド「prepend()」を使用して、要素を移動
See the Pen
prepend_menu by 三好雄介 (@yusuke5028198)
on CodePen.
4.1_要素を移動するJavaScript
$('#footerMenuBar-MobileTablet .dfad p').prepend($('#ad_img'));
メソッド「prepend(content)」で、引数で指定したコンテンツを各要素の先頭に挿入する。
まとめ
お疲れ様でした。
今回は、「clone()」「appendTo()」「prepend()」メソッドを使用することで、別の場所にある要素を複製・移動することが可能です。この方法を使用して、プラグインで自動生成される要素を、自身で作成したウィンドウにも入れることができます。ご紹介したメソッドを使用することで、Webページを更に使いやすい形にデザインできるようになることでしょう。
ご一読いただき、ありがとうございました。
