MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


【momo様】WordPressにHTMLやCSSのコードを追加する方法

初心者ですが、よろしくお願いいたします。

HTMLとCSSのサンプルコードをよく目にするのですが、具体的にどういった方法でこのサンプルコードを使用するのでしょうか?
単純に追加するだけというものなのでしょうか?


>momo様
ご相談ありがとうございます。

HTMLコードの追加

HTMLコードは基本的に貼り付けるだけで大丈夫です。
旧エディタなら「テキストモード」
新エディタでもブロック追加>フォーマット>「ソースコード」「カスタムHTML」などで貼り付けが可能でしょう。
(新エディタはそれほど使いこなしていないのでご自身で試してください)

「テキスト」モードで貼り付ける際の注意点ですが、ビジュアルエディタで開き直すとコードが自動修正されることがあります。

例:onClickのようなJSの要素は削除されたりします

貼り付けたコード
<input type="button" value="トップへ" onClick="">

変換されたコード
<input type="button" value="トップへ" />

CSSの追加方法

CSSはエディタに貼り付けることも実は可能ですが効率的ではありません。

外観>カスタマイズ>追加CSS

カスタマイズ機能でCSSを追加することも可能です。

追加CSS

多くのCSSを追加するのには適していません。

プラグイン

CSSを追加するプラグインがあります。

『Simple Custom CSS and JS』など

style.css

テーマにはCSSファイルがあります。

/wp-content/themes/【テーマ名フォルダ】/style.css

これは外観>テーマ編集 で追記・修正もできますが、FTPソフトなどで管理することをお勧めします。

修正内容が間違っていたりすると前のバージョンに戻したりしなくてはいけません。古いバージョンのファイルに戻せるようにしておく必要があります。

特にテーマのCSSをそのまま使う場合は注記もでてくると思いますがアップデートで修正内容が消えてしまいます。

理想は子テーマを作る事です。

以下の記事でも解説しています。
WordPressのCSS追加について 記事ページのみに特定のスタイルを追加するカスタマイズ方法など

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA