WordPressの投稿に追加のコードを記述または追加する理由は数多くあります。広告を表示したり、ウェブサイトの特定のセクションに独自のスタイルを適用したり、注意を引くために単にテキストやコンテンツをマークアウトしたりする必要があるかもしれません。それでも、さまざまな視覚効果を実現するコードを追加して、ユーザーエクスペリエンスを向上させることができます.


これらすべてと他の理由は正当ですが、カスタムコードで何を達成しようとしているかに関係なく、コードを記述するプロセスは、神経を痛めたり、非常に困難な場合があります。このチュートリアルでは、次の領域について説明します。

  • コードのように見えるがコードのようには動作しないコードを追加する(コード行を表示したり、Webサイトの外観を改善したりする場合)
  • コードのように動作することを意図したコードを追加します。 Google Adsense Adsなどのスクリプト広告

これら2つのカテゴリの下で、HTML、CSS、Javascriptなどのプログラミングコードについて少し掘り下げ、広告とその美しさについて触れます。

容器。さて、これ以上ファンファーレなしで、ビジネスに取り掛かってコードを書きましょう.

コードのように見えるがコードのようには動作しないコードの追加

ユーザーがコピーして貼り付けることができるコード(おそらくWebデザイナーまたは開発者)を紹介したい場合は、1行の改行でもコードが混乱し、すべての作業が失敗する可能性があるため、正しく実行することが重要です。 WordPressによるコードの解釈方法は、HTMLエディターとVisual Postエディターのどちらを使用しているかによって異なります。コードをビジュアルエディターに直接入力しても、ビジュアルエディターはコードを通常のテキストと見なすため、作成したい効果はありません。つまり、Webブラウザーはコードを「コード」として解釈せず、通常のテキストとして解釈します。.

一方、HTML Post Editorは、使用するすべてのHTMLまたはCSSマークアップを認識します。つまり、それらはWebブラウザーによって解釈され、レイアウトが乱れ、ファンキーに見えるコンテンツになる可能性があります。例えば, 

ビジュアルエディターでは通常のテキストとして解釈され、結果は

. しかしながら,

 HTMLエディタではHTMLマークアップとして解釈され、結果としてコンテナが作成されます.

HTML演習

これは実際には無益さの練習ですが、私が何を意味するのかをより明確に把握するために試すことができます。ちょうどあなたを開く HTMLエディター, タイプ

下書きとして保存します。下書きが保存されたら、[投稿をプレビュー]をクリックして 壊れたウェブサイト. 心配しないでください。これは永続的なものではなく、ドラフトをゴミ箱に捨てることができます。今ビジネスに戻って.

通常、コードは2つの方法で使用できます。まず、行(または段落)内でコードを使用して、コードに関するポイントを明確にすることができます。次に、次のようなブロックにコードを記述し、強調表示して配置できます。



WordPress投稿チュートリアルでのコードの記述


...

上記の効果を達成するには、次のように記述されたコードタグを使用します。 …ここにコードが入ります . 代替矢印(<  >)WordPressサイトと使用している投稿エディター(ビジュアルまたはHTML)に応じて、角かっこ([[])を使用します。表示したいコードは開始タグの間になければなりません,   と終了タグ, . たとえば、段落内でコードを使用するには

段落内のコード

コードタグは、HTML以外のテキストをコードのように見せますが、WebブラウザにHTMLマークアップを解釈したり、投稿から削除したりすることはありません。これは、ブラウザがHTMLマークアップを引き続きエンコードできるため、表示するのが難しいことを意味します HTMLタグ あなたのコードで。ただし、拡張文字または文字エンティティを使用して、 < > 文字、すべてのブラウザをだます。例えば…

HTMLタグはHTMLマークアップとして解釈できます

…新しいコンテナを作成します(おかげで

)と見出し(

)、それはあなたのウェブページを台無しにするでしょう。ただし、文字エンティティを使用して < > 矢印を使用すると、この動作を回避し、必要に応じてコードを出力します。したがって、上記のコードは次のようになります。

代わりに文字エンティティを使用してください

強調表示されたコードブロックを作成する

コードのブロック(またはテキスト)を強調表示したい場合は、次のようにします。

コードブロック

まず、コード(またはテキスト)を次のようにコンテナーに配置します。

HTMLエディターでこれを行う必要があります

次に、CSSを使用して直接(上記の画像のように)、または style.css テーマのメインフォルダにあるファイル.

コードタグのスタイルを設定する

コードタグはからのフォントサイズを使用します デフォルトでは、テキストを等幅フォントで配置します。ただし、すべてを変更して、コードを希望どおりに表示することもできます。追加する必要があるのは…

 コード{font-size:1.2em;色:#000; font-weight:normal;} 

…またはあなたのようなもの style.css. 無制限のスタイルがあり、すべてがあなたの個人的な好みに依存するので、遠慮せず–スタイルを離れて.

コードのように動作するコードを追加する

このセクションは、広告やその他のスクリプトを表示する場合に特に役立ちます。投稿内のJavaScriptスニペット。次のようなプラグインがありますが クイックAdSense, 投稿の広告を管理するのに役立ちます。完全に制御できるスタンドアロンスクリプトのインストールに興味があるかもしれません。.

広告がシンプルな画像とリンクの場合、アップロードユーティリティを使用して投稿に広告を追加できます。画像をアップロードしてリンク(およびおそらくキャプション)を入力するだけで、作業は完了です。この方法には制限がありますが、通常の画像と同じように、広告は左、右、または中央にしか配置できません。または、HTMLエディターを使用して投稿内にコンテナーを作成することもできます.

例:


このコンテナは、広告を配置したい場所に正確に作成してください。つまり、広告を追加する前に投稿を準備しておく必要があります。コンテナの準備ができたら、好きなようにスタイルを設定できます。を使用して、style.cssを使用して移動できます。 ポジション プロパティ。実行したい場合 Google Adsense広告 あなたの投稿内で、あなたはまだ使うことができます クイックAdSense –プラグイン–または、コンテナを作成して、次のように広告コードを配置します。


注1: Googleの広告はJavascriptベースであり、ユーザーがマシンでJavascriptを有効にしている場合、すべての主要なWebブラウザーで解釈できます。.

注2: 投稿やウェブサイトをめちゃくちゃにしないように、ウェブサイトに適した広告サイズを選択する必要があります.

追加の作業をせずにすべての投稿(現在および将来の投稿)に表示される永続的な広告を追加する場合は、 単一投稿テンプレート (single.php). 次のコードをに追加して、すべての投稿の上部に468×60ピクセルの広告を配置しました single.php 直後 < – – END post-entry-meta – ->.


もちろん、独自のGoogle広告を使用する必要があります��これがGoogleアドセンス広告が私のブログに表示される方法です。

WordPressでコードを書く

見つけるには single.php, に行く 管理パネル– >>外観– >>エディタ– >> single.php. single.phpが開いたら、検索バーを使用します (Ctrl + F) 見つける < – – END post-entry-meta – ->.

コンテナはそのままにすることも、スタイルに合わせてstyle.cssを使用してスタイルを設定することもできます。すべての変更を保存することを忘れないでください。の

コンテナは本当に便利です。CSSと1オンスの創造性を組み合わせれば、WordPressサイトで多くのことを実現できます。それはあなたがあなたのウェブサイトのどこにでもどんなコード(または本当に何でも)を置くのを助けることができます.

ツールボックス

WordPressの投稿でカスタムコードを記述する方法について詳しく知りたい場合は、次のリソースをご覧ください。

まあ、それはそれについてです。最初に概説した領域をカバーすることができました。ただし、この投稿の概念が理解できない場合や、提案や意見を追加したい場合は、下のコメントセクションで意見を共有してください。!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me