WEBのこと

WordPress納品時、カスタム投稿に説明文をつけてHTMLをそのまま出力する方法

カスタム投稿 説明文を追加

WordPressを使ってクライアントに納品をするときにメッセージを残したいときがある。

エディタの使い方やブログの書き方、編集の仕方など様々だが説明文があったほうがクライアントに優しく、満足度の高い納品になる。

今回はCustom Post Type UIAdvanced Custom Fieldsを使った場合の説明文の追加方法と、説明文内にコピペ用などにつかうHTMLの記述方法を紹介していく。

プラグイン導入

まずは、Custom Post Type UIAdvanced Custom FieldsプラグインをWordpressにインストールしよう。

CPT UIはカスタム投稿を作れるプラグインで、Advanced Custom Fieldsは投稿の編集画面にオリジナルの項目を作ることが出来るプラグインだ。

インストールは管理画面 > プラグイン からコピペで検索してインストールしてね。

クライアントのことを考えるならエディタを拡張できるプラグイン、TinyMCE Advancedもいれておこう。

説明文の入れ方

管理画面 > カスタムフィールドからフィールドグループを編集していく。

カスタムフィールド 説明文追加

フィールドを追加ボタンから新しいフィールドを入力していく。

フィールドラベルをお知らせとし、フィールドタイプを「メッセージ」にする。お知らせをカスタムフィールドの一番上に置くことで最初に確認をしてもらえる。

メッセージ内はHTMLが使えるので、メッセージ内3行目の「・ブログの書き方は~」の部分のaで囲まれた部分はリンクとして表示される。参考リンクを張るときなどはこの方法を使えば良い。

だが、HTMLをそのまま出したいこともある。

クライアントにテキストエディタ状態で渡す時にはリンクの入力や文字装飾の仕方を書いておく必要がありますよね。

今回のメインは説明文の中にHTMLを直接記述してクライアントはコピペをするだけで使えるようにする方法だ!

広告

説明文の中にHTMLを直接埋め込む

HTMLを直接埋め込むには、HTMLを文字実体参照または数値文字参照に変換する必要がある。

文字実体参照とかよくわからないし、調べるのもメンドクサイ。だが、その作業がオンライン上で簡単にできるサイトがある。

HTMLコンバート

 

http://sei-street.sakura.ne.jp/page/doujin/site/doc/tool_text2html/index.html

上記のURLからサイトにいくと上記画像の画面が表示されるので、上部の入力エリアに変換したいHTMLをそのまま入力して、赤枠で囲んである「テキスト→HTML」ボタンを選択。

そうすると下部エリアに変換したものが出力されるぞ。

ここで変換したものをそのまま説明文に貼り付ければ完成だ!

実際の見え方

実際の見え方はこうなる。説明文は簡素に作ってあるので、必要に応じてカスタムしてほしい。

説明文 完成イメージ

一番上はカスタムフィールドで説明文を追加したものが表示されている。

2行目のブログの書き方はこちらの部分はリンク表示になっているが、3行目はHTMLを文字実体参照・数値文字参照に変換したのでその状態で出力されていることがわかる。

広告

まとめ

カスタムフィールドには、テキストエディタを表示する「テキストエリア」とビジュアルエディタを表示する「Wysiwygエディタ」があるので、用途や状況に応じて使い分けましょう。

テキストエリアを使用する場合はクライアントにわかりやすいように説明文を書き足してくださいね。