• Web

WordPressのテキストモードへの切り替えタイミング

ホームページ制作

先日、お客様より「投稿内でLINEに飛べるボタンを設置したい」というご質問がありました。
そこで今回は、WordPressの投稿内に外部ボタンを正しく設置する方法について、ご紹介します。
M様、お問い合わせいただきありがとうございます。

ソースコードの貼り付け方法

LINEのような外部ボタンをWordPressの投稿内に配置する際に、「※ブログなどに貼り付ける場合は、こちらを利用してください。」というようなメッセージと一緒に以下のような文字列があります。

<a href=”https://line.me/”><img height=”36″ border=”0″ alt=”友だち追加” src=”https://scdn.line-apps.com/n/line_add_friends/btn/ja.png”></a>

これはソースコードと呼ばれるもので、このコードをコピーしてWordPress投稿画面にそのまま貼り付けしても正しく表示されません。
このソースコードは機械的に認識させるためのものになりますので、そのまま貼り付けしても表示できないようになっています。

そこで、このようなソースコードを貼り付けたい場合には、いつもとはちょっと違う方法を行う必要があります。

テキストエディタで入力

WordPressの投稿画面には、エディタ切替モードというのが付いています。
これは本文入力欄の右上に付いており、「ビジュアル」と「テキスト」に切替できるようになっています。

ワードプレスモードに切り替えビジュアルモードというのは、改行や見出しなどできるだけサイト閲覧時と同じようなレイアウト配置されるようになっているので、文章のレイアウトが作りやすいようになっています。WordPressで投稿されている人のほとんどがビジュアルモードで文章作成していることと思います。

もう一つのテキストモードは、HTMLなどのソースコード用となっておりますのでなかなか馴染めないことと思いますが、今回のような外部ボタンの配置を行う場合はこのテキストモードに切り替えしてから貼り付けを行います。
このテキストモードに切替を行うことでソースコードが入力できるようになりますので、LINEボタンなどの外部ボタンの設置ができるようになります。

しかし、このテキストモードの切り替えるタイミングなど少しポイントがあります。

基本的な貼り付け方法の流れ

ここでは基本的なソースコードの貼り付け方法についてご案内します。

まずは、タイトルや文章・カテゴリー・アイキャッチなど各部の設定を普段通りに行ってください。
そして公開直前になりましたら、テキストモードに切り替えして配置したい場所にLINEボタンなどのソースコードを貼り付けします。テキストモードではレイアウトに必要なソースコードが入っていますので、間違っても削除しないように注意してください。削除してしまうとレイアウト崩れなど起こる可能性もあります。
テキストモードでソースコードが貼り付けできたら公開して完了となります。

ここで注意してほしいことがあります。

それは、ソースコードを貼り付けしてからさらに文章編集を行うと、先ほど配置したソースコードが不具合となる場合があります。

  1. ビジュアルモードで文章作成
  2. テキストモードでソースコード貼り付け
  3. ソースコード貼り付け後、公開
  4. ソースコード配置してから、ビジュアルモードに戻して編集すると不具合の可能性

レイアウト崩れを防ぐことを考えますと、公開直前にソースコードを貼り付ける方法が妥当と言えます。

関連記事

  1. 格安ホームページ

    格安のホームページ制作で本当に良いの?メリット・デメリットを大公開

  2. サイト編集したけど反映されない!そんな時にはキャッシュクリアで掃除しよ…

  3. ホームページの必要性

    ホームページって本当に必要?価値あるサイトになれる7つのポイント

  4. ホームページから集客

    ホームページからの問合せを逃がしてる?改善できるかもしれない5項目を紹…

  5. 集客に繋がるホームページ制作

    補助金を使えばホームページ制作が2/3の費用で可能

  6. ホームページSEO

    ホームページはSEO対策だけでなくコンテンツ内容がカギを握る

最近の記事

  1. アフィリエイトで稼ぐ
  2. WordPressで不正ログイン
  3. 格安ホームページの裏側を暴露
  4. ホームページって必要
  5. 山梨にあるホームページ制作
LINE登録