【メモ】新・旧WordPressで外部のhtmlやcssをコピペして使用する方法

WordPressで作ったWebページは、基本的にテーマが用意している見た目にそったものになります。
そのため、有名なテーマを使っていると、他の人が作ったサイトと同じような見た目に…

ですが世の中には、素晴らしい見た目にできるhtmlやcssを公開してくれていて、自分のサイトをオリジナルなものにすることができるのです。

しかしせっかく公開してもらっているhtmlやcssですが、それをWordPressに取り込むの方法がわからないという人も多いはず。

そこで、やり方を要点のみでお伝えします。

WordPressのバージョンによって方法が異なる

WordPressが5.0にアップデートしたタイミングで、投稿用のエディタが一新されました。
これにより、操作方法までもが変わってしまいました。
そのため、バージョンに合わせた方法を知る必要があります。

投稿画面がこちらなら、新しいエディタ(Gutenberg)です。
新しいエディタ(Gutenberg)

新しいエディタ(Gutenberg)でhtmlやcssをコピペする方法はこちら

こちらの画面なら、以前のエディタです。

以前のエディタ(Gutenberg)でhtmlやcssをコピペする方法はこちら

新しいエディタ(Gutenberg)の場合

(1) 右上の (+) をクリック

右上の (+) をクリック

(2) フォーマット内のカスタムHTMLをクリック

フォーマット内のカスタムHTMLをクリック

(3) 表示された枠内に、HTMLを貼り付け

表示された枠内に、HTMLを貼り付け

(4) cssを貼り付け

cssは <style></style>で囲んでコピペします。

cssを貼り付け

テーマでページごとにスタイルを設定できる場合は、そちらにコピペします。

同じcssを記事内で複数回使用する場合は、一回だけでOKです。

以前のエディタ(Gutenberg)の場合

(1) 右上のタブを「ビジュアル」から「テキスト」に切り替えます。
※ビジュアルのままだと、入力したHTMLがそのまま表示されます

右上のタブを「ビジュアル」から「テキスト」に切り替え

(2) HTMLを貼り付けます。

以前のエディタにHTMLを貼り付る

WordPressの自動整形について

WordPressの旧エディタは、入力されたHTMLを自動で整形します。
そのため、コピペしたHTMLがそのまま表示されないことがあります。

(3) cssを貼り付け

cssは <style></style>で囲んでコピペします。

基本的にはこれで問題ありませんが、余分な行などを入れると、自動整形により正常に動作しないケースがあります。
テーマでページごとにスタイルを設定できる場合は、そちらを利用するか、プラグインを利用してください。