WordPress内でHTMLソースなどを表示

SyntaxHighlighterのプラグインを導入する。
SyntaxHighlighterのプラグインは各種あり、使用法がそれぞれ異なるので、ここではSyntaxHighlighter Evolvedを追加した場合を説明する。
 

記事内へのソースの記述
ソース部分を[言語名] ソース[/言語名]と言語名(略称含む)で囲って投稿に記述。

<具体例 – htmlの場合>
挿入したいソース:
<p id=”pagetop”><a href=”#top”>Page Top</a></p>
 

ソースを追加する為の加工:
[html]
<p id=”pagetop”><a href=”#top”>Page Top</a></p>
[/html]
 

実際の記事表示:

<p id="pagetop"><a href="#top">Page Top</a></p>

  

<他の言語の場合の記述>
CSS:
[css]
CSSソース
[/css]

結果は

div#sample2 {
box-shadow: 5px 5px 10px 5px #000;
   -moz-box-shadow: 5px 5px 10px 5px #000;
   -webkit-box-shadow: 5px 5px 10px 5px #000;
/* 水平方向、水平方向、垂直方向、ぼかし距離、広がり距離、色 */

 

Javascript:
[js]
ソースコード
[/js]

結果は

document.onkeypress = keyPress;
e = event.keyCode;
window.status = "key=" + e;
window.alert(window.status);

  

そのほかの言語名及び言語略称
[xml]ソースコード[/xml]
[php]ソースコード[/php]
[shell]ソースコード[/shell]
[c]ソースコード[/c]
[c#]ソースコード[/c#]
[jscript]ソースコード[/jscript]
[javascript]ソースコード[/javascript]
[perl]ソースコード[/perl]
[Perl]ソースコード[/Perl]
[text]ソースコード[/text]
[sql]ソースコード[/sql]
[vb]ソースコード[/vb]

 
注意)ソースコードの入力
コード部分をMS Wordから新規投稿のビジュアルタブに貼り付けると、ビジュアルタブの表示では1行づつでも、サイトに公開すると改行コードの違いから下記のように行間が余計に開いたり、不要な<P>タグが挿入されたりする。


document.onkeypress = keyPress;

e = event.keyCode;

window.status = "key=" + e;

window.alert(window.status);

そのような時はWordデータを一度メモ帳に貼り、余分な改行を削除してから貼りなおすか、Wordpressの新規投稿をビジュアルではなくテキストタグで余分な改行を削除する。
 
参考サイト:
WordPress.org Plugin Directory SyntaxHighlighter Evolved
http://wordpress.org/plugins/syntaxhighlighter/
 
ワードプレスにソースコードを表示させるプラグイン【SyntaxHighlighter】
http://www.moco358.com/archives/480
 
ソースコードをそのまま表示!WordPressプラグイン「SyntaxHighlighter」で出来ること
http://xinome.net/2013/04/syntax_highlighter/

 

 

カテゴリー: WordPress, WP 機能 タグ: , , , , , パーマリンク