Wordpress

HTMLの要素を移動・複製する方法【WordPress】【JavaScript】

  1. HOME >
  2. Wordpress >

HTMLの要素を移動・複製する方法【WordPress】【JavaScript】

HTMLの要素を移動・複製する方法【WordPress】【JavaScript】

要素を移動・複製する方法

 

  • 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ページを更に使いやすい形にデザインできるようになることでしょう。

ご一読いただき、ありがとうございました。

Contact Form〈お問い合わせはこちらから〉

注目記事

MY BESTランキング

Webページ作成には必携!!

逆引きの見やすさが抜群!!

だから、

  1. HTMLのソースコード画面を読み取れる。
  2. 思い通りのCSSスタイルを調べられる。

是非、一冊手元にもってブログのレイアウトを自作しよう。

たった30分間を続ける重要性がわかる一冊!!

1日たったの30分間

けれども、
それが1週間、1ヶ月、1年となると
大きな差になる。

この本を読むだけで、
1日の生活の中の「たった30分間」の重要性がすぐにわかります。

勉強を始めるモチベーションになる一冊
是非、手元に!!

アフィリエイトならA8.net

最初のアフィリエイトにもってこいのASPです。

操作性がよく、
クリック率+EPCものっているので
初心者にとってありがたい仕組みになっています。

  • この記事を書いた人
  • 最新記事
YusukeMiyoshi

YusukeMiyoshi

Illustrator、Photoshopのテクニック。 WordPressのカスタマイズ についての記事が中心です。 よい本に出会えれば、ご紹介させていただきます。 Twitterのフォローお願いいたします。

-Wordpress

ユウスケの雑記ブログ
Thank you for your follow up.

Copyright© ユウスケの雑記ブログ , 2020 All Rights Reserved Powered by AFFINGER5.