【簡単】ワードプレスのhtmlソースコードを確認・表示・コピーする方法

目安時間11分

りあこです。

 

 

今日は、

ワードプレスのhtmlコードを

確認・表示・コピーする方法

についてお話します。

 

 

・・・と言ってみましたが、

すいません。先に謝らせて。

 

 

正直なところ、私は

htmlとかソースコードとか

まったく専門の人じゃないので、

 

この表現自体が正しいかどうかさえ、

あまり自信がないのです(苦笑

 

 

じゃあ、なぜ

「そんな不確かなことを記事にするのか?」

については、後ほどお話するとして。

 

 

先に、

ワードプレスの

htmlソースコードを

確認・表示・コピーする方法

についてお話しますね!

 

 

ワードプレスのhtml・ソースコードを確認する方法

  • まず、コードを見たいサイト(記事)を開いてください。

 

仮に、今回は

私が運営している「メルマガ登録ページ」を例にお話しますね。

 

りあこ,メルマガ登録ページ

 

 

  • 見たいページで「右クリック」します。

 

ワードプレス,右クリック

 

 

右クリックするときは、画像やイラストの上などではなく『空白の箇所』で右クリックしてください。

 

 

  • 「ページのソースを表示」を選択。

 

ブラウザによって表現が違います。

 

  • Google Chrome→「ページのソースを表示」
  • Firefox→「ページのソースを表示」
  • Internet Explorer→「ソースの表示」

 

ワードプレス,ページのソースを表示

 

 

もし、「ページのソースを表示」「ソースの表示」などの項目が出てこないとしたら、右クリックする場所を変えてください。

 

画像・イラストやフォーム等の上ではなく『空白の箇所』で右クリックしてみましょう。

 

 

  • WordPressのソースコード(html)が表示されました!

 

WordPress,記事,ソースコード,表示

 

 

うまく表示されたかな?

 

あなたの知りたかったことは ↑ コレでしたか?

 

 

ワードプレスのソースコード・htmlをコピーする方法

ここまでできれば、

ワードプレスの『ソースコードをコピーする』のは、もう簡単ですね!

 

必要なコードを選択して、コピーすればOKです。

 

 

メルマガ登録フォームを「複数設置」したい

たとえば、

私がコピーしたかったのは

『メルマガ登録フォーム』のHTMLコードなんです。

 

 

今、こちらの『メルマガ登録フォーム』は

ページの1番下にだけ表示されている状態なんですが…

 

 

メルマガ登録フォーム

 

 

このメルマガ登録フォームを

『好きな場所に、複数設置できないかな』

と思って、該当のコードを探していたんですね。

 

 

どうやらアンリミWPテンプレートの仕様上

メルマガ登録フォームは、ページの最後1箇所しか置けないようでして。

 

余談ですが、私の使っているアンリミWPテンプレートは有料版で、現在は販売されていません。

 

 

メルマガ登録フォームのコードは

きっと「一番下の方にあるはず」ですから…

 

 

メルマガ登録フォーム,コード,コピー

 

 

ありました!

 

 

あとは、

必要なコードを選択してコピーすればOKです。

 

 

コピーするHTMLコードの場所がわからないときは?

もし、

「どこからどこまでが自分の探しているコードなのか?」

がわからないようでしたら

 

一度、HTMLの入門書を読んでみると良いです。

 

自分でアレコレ試してみると、

だいたい感覚がつかめるようになりますよ!

 

 

▼私は『できる』シリーズで、ひと通りのことはできるようになりました♪

 

 

メルマガ登録フォームのhtmlコードをコピペして「テスト」する

試しに、

先ほどコピーしたコードが

うまく表示されるかテストしてみましょうか。

 

 

投稿、または固定ページの「新規追加」で試してみます。

 

 

WordPress,メルマガ登録フォーム,htmlコード

 

 

コピーしたhtmlコードは、かならず

「テキスト」に切り替えてから貼り付けてくださいね!

 

 

また、今回のケースでは

メルマガ登録ページ用に「指定のテンプレート」があるため

「ページ属性→テンプレート」から該当のものを選択しました。

 

アンリミ特典WPテンプレートの場合は
「1カラム(メルマガ登録ページ専用)」を選択します。

 

 

この状態で『プレビュー』してみましょう。

 

メルマガ登録フォーム,表示

 

 

問題なく表示されましたね!

 

 

今回は「メルマガ登録フォーム」のテストですから、この状態で、さらに「仮でメールアドレスを登録」してみて、問題なく1通目のメルマガが配信されることを確認するのも大事ですね。

 

 

ほんの「ささいなこと」で、つまづいてました。

ここまで、コードの確認&コピーする方法をお話しましたが、いかがでしたか?

 

 

じつは私、

ブラウザでコードを表示させる方法は

すでに知っていたんですけどね?

 

 

今回、ずっと

画像イラストや

メルマガ登録フォームの上で

右クリックしていたせいで

 

「ページのソースを表示」の項目が見つからなくて

だいぶ遠回りしてしまったんです(^^;

 

 

ほんと、ブログって

ちょっとした些細なことで、つまづくものですよね~(笑)

 

 

でも、おかげで

他にも、同じようなところで、さまよっている人がいるんじゃないかな?

って気づくことができましたよ。

 

 

WPでコードを「表示させる方法」ではない!笑

例えば、今回

 

私はまず、

「ワードプレスのコードを表示させる方法」

って検索して調べたんですけどね?

 

検索結果に出てくる記事が、すべて!

 

私の知りたいことと、

ぜんぜん違ってたんですよー!(ノД`)

 

 

私の知りたいこと

→ワードプレスでコードを確認する方法

 

検索結果に出てくる記事

→ワードプレスでコードを表示させる・記述する方法

 

コードを表示させたいんじゃなくて

コードを確認したいんですよねー?!

 

 

ワードプレス,コード,確認

 

 

ほら~!お仲間いるじゃない~!!

 

 

で、自分の検索履歴を見てみたら…

 

  • ワードプレスのhtmlをコピーする方法
  • ワードプレスのソースをコピーする方法
  • WordPress ソースコード 表示
  • WordPress htmlコード 表示
  • WordPress htmlコード 確認
  • WordPress ソースコード 確認
  • WordPress ページのソース
  • WordPress ページのソースを確認する方法
  • wordpress ソースコードの記述を見る方法
  • Chrome ページのソースを表示

 

 

めちゃくちゃ

さまよってる~(笑)

 

 

で、

おそらく、これは…『(私のような)シロウトさんだから出てくるキーワード』なのかな

と思いまして。

 

きっと私の他にも『さまよえる難民』がいるはず!

確信しまして!!

 

今回、記事に

まとめさせてもらいました。

 

 

お疲れさまでした~(o´д`o)

 

 

こんな感じで、りあこさんは

技術的なことは、やや苦手ですが(笑)

 

一緒に悩みながら、確認しながら

1つ1つていねいに『ブログ運営のサポート』をしています。

 

 

もし、あなたが

「ブログやメルマガのちょっとしたことを、気軽に質問しやすい人はいないかな~」

とか

「迷ったときや立ち止まったときに、ちょっと相談できる人がいたらいいな」

と思うことがありましたら、チェックしてみてください。

 

2020年10月お知らせ

「りあこ個別メールサポート特典」は2020年9月30日をもって終了しました。

今後は、新特典「運命を変える『自分のためブログ』の作り方」のご提供となります。

今までにいただいた質問・相談は、ご購入者様限定ブログ等の特典でシェアしています。合わせて参考にしていただければ幸いです。

 

 


家でできる仕事の始め方

 

次世代起業家育成セミナー,主婦

 

 

 

もっと子どもの近くにいたい

 

『自立した私』になりたいあなたに

 

『家でできる仕事の始め方』をご紹介しています

 

 

 

 

 

りあこの自己紹介

りあこ
家で働きたいママの寄り添いサポーター・りあこ

3人娘のママ。
子育てしながら自宅で働いています。

ただ今メルマガで
保育園ママ専用【1人起業】マニュアルを公開中。

のべ1300名以上の保育園ママたちに読んでいただきました。

夢理想ではなく『現実的な話』を知りたいあなたなら、きっと役に立ちますよ。

>>もう少しくわしい自己紹介はこちら

カテゴリー

ページの先頭へ