このWordPressプラグインを導入すれば
ソースを見やすく表示出来ます。

プラグインなのでインストールすれば
すぐ使えます。

インストール方法

左ナビにあるプラグイン→新規追加→「SyntaxHighlighter Evolved」で検索→インストール

インストールすると左ナビの設定に「SyntaxHighlighter」が出るので、
そこからデザインなど変更出来ます。

使い方

・HTML
・CSS
・JavaScript
・PHP
など様々な言語に対応してます。

こちらに対応言語がすべて載ってます。

・autolinks — 自動リンクの有効・無効
・classname — コードボックスに追加するCSSのclass
・collapse — コードボックスをデフォルトの状態で閉じるかどうか。コードボックスを開くにはクリックが要求されます。長いコードの出力の際に有効です。
・firstline — 行番号の出力の際に、最初の行の番号を表す数値
・gutter — 左側に行番号を配置するかどうか
・highlight — ハイライトさせる行番号のリスト（カンマ区切り）、範囲でも指定可能。例: 2,5-10,12
・htmlscript — HTML/XML をハイライトするかどうか。HTMLウェブページで PHP を使うようにHTML/XMLとプログラムが混在するような時に有効です。上のプレビューではこの設定が有効になっています。これは特定の言語でしか動作しません。
・light — 行番号やツールバーを無効にする軽い表示モードのオン・オフ
・padlinenumbers — 行番号の余白。有効な値は、 false(余白なし), true (自動)、数値(余白)
・title （v3のみ） — コードの前に表示される表題テキスト。collapseのパラメータと合わせて使うと有効です。
・toolbar — ツールバーのオン・オフ(v2のボタン、v3のクエッションマーク)
・wraplines (v2のみ) — 折り返しの有効・無効

表示サンプル ： 1

↓

<?php
add_action( 'init', 'SyntaxHighlighter', 5 );
function SyntaxHighlighter() {
	global $SyntaxHighlighter;
	$SyntaxHighlighter = new SyntaxHighlighter();
}
?>

表示サンプル ： 2

↓

#container {
    width: 940px;
    margin: 0 auto;
    padding: 20px 0 0;
    text-align: left;
    font-weight: bold;
    color: #c00;
    background: #fff;
}

表示サンプル ： 3

↓

$(function(){
　//読み込み完了時に行う処理
});

表示サンプル ： 4

↓

ここにコードを入れます
プレーンで表示されます。