ワードプレスの記事内でコード表示をするには?【WPプラグイン】

公開日: : 最終更新日:2014/02/16 WPプラグイン, ワードプレス ,

くつキッチュ!アイコン wordpress html tattoo by webmove, on Flickrhtml tattoo by webmove, on Flickr

もくじ

ドキ!トラブルだらけのワードプレスブログ立ち上げ大会小ネタメモφ(. .)の二回目になります。
今回は、ワードプレスの記事内でコード表示をするには?

記事内のコード表示

くつきがじめて定期的に更新したブログは、Seesaaでした。
1年ほど利用させてもらったSeesaaに特に不満はありませんでしたけど、WordPressを使い始めてしまうと戻れなくなりますね;;
例えばSeesaaではコードを表示するプレタグが使えなかったり…。

プレタグ

というわけで、ブログ記事内でコード表示するにはpreタグというタグを使います。
大抵は<PRE>コード</PRE>で囲った部分はコードであると認識してくれるはずなのですが、Seesaaではコード部分真っ白になっちゃってました。
しかし、ワードプレスではプラグインCrayon Syntax Highlighterを導入すれば簡単にコードが表示することが出来ます↓

右端のメニューにコピペ機能があったりなかなか便利♪ これだけで「ワードプレス素敵☆」って思っちゃいます。

Codeが色分けされて見やすいプラグインSyntaxHighlighter Evolved

ちなみにこんな表示になるプラグインSyntaxHighlighter Evolvedもあります。

{
display: block;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}

こちらも、[言語][/言語]で囲った部分をテキストとして表示してくれるプラグインです。 色分けされていて見やすいですね。

くつきの場合は小ネタのため

と言ってもくつきもあまり詳しい方ではないので、コード記述して説明をするということはめったにありません…
この間使ったのは、HelloDollyのプラグイン編集でhello-dolly/hello.phpのこちら⇒$lyrics = “を、お好きなテキスト”;に書き換えて、オモシロ作業環境を整えようという小ネタ↓でした。

function hello_dolly_get_lyric() {
 /** These are the lyrics to Hello Dolly */
$lyrics = "お好きな罵り
だが断るッ!!
嘘だっ!!!
お好きな罵倒";
// Here we split it into lines
 $lyrics = explode( "\n", $lyrics );

結果↓ WordPress謎の標準装備プラグインHelloDollyを有効化してみた結果www

くつきがコードを表示するのはこんな時くらいですねー(;´∀`)

まとめ

当初、記事内プラグインと音楽埋め込みプラグインを同記事にしていたのですが、見づらいので別けました。
音楽(SoundCloud)埋め込み&埋め込みプラグインの記事はこちら ワードプレスの記事内でSoundCloudの音楽を埋め込むには?【WPプラグイン】

でっは~(*´∀`*)ノシ

記事がお気に召しましたら投票していただけると嬉しいです♪
ブログランキング・にほんブログ村へにほんブログ村

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr

関連記事

Numbers by SamahR, on Flickr Wpでページめくり効果が簡単に使えるプラグインFlippingBook Galleryの使い方

2-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方『BOOKを記事で表示する』編

  追記:「WordPressの更新後、まれに『FlippingBook

記事を読む

scream and shout by Mindaugas Danys, on Flickr 『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!時の対処法。

「記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』がフリーズしまくりで絶望したーっ!!」場合の対処法。

記事内コード表示用Wpプラグイン『SyntaxHighlighter Evolved』を適用

記事を読む

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法 default_page画像

ネットオウルでワードプレスをインストしてもログイン画面が表示されない時の対処法

 もくじ これまで無料サーバーのめちゃくちゃお手軽なインストールに頼りきりだったくつき

記事を読む

shout! by su neko, on Flickr Wordpressの画像編集に絶望したーっ アイキャッチ画像

WordPress3.9更新後の画像編集画面に絶望したーっ!…ので、よく使うスタイル指定をメモメモ…

なんだか最近Wordpressの画像編集機能が微妙です。 3.9に更新してからというも

記事を読む

I believe I can fly - I believe I can touch the sky... by Harold Kuiper, on Flickr TOC+を使えば記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

TOC+を使えば同一記事内リンクもツーステップで簡単♪ 『wp 文字まで飛ぶようにしたい』で検索されていらしたどなたかへの手紙 

  秘密の抜け穴 I believe I can fly - I believe I can

記事を読む

WordPress 4.3の更新でやらかした話 WP-Banがバグってサイトが真っ白に( × △ × )【解決済み】ようこそWordPress4.3

WordPress 4.3の更新でやらかした話 サイトが真っ白( × △ × )【更新時のプラグイン停止をお忘れなく!】

  『ユーキャン』で資料請求しました。※住所部分など、加工しています   W

記事を読む

Wpマルチサイト化サブディレクトリ型はめちゃ簡単!の初心者のハマリポイントは2箇所だけ! bento box by josey4628, on Flickr

Wpマルチサイト化(サブディレクトリ型)はめちゃ簡単!初心者のハマリポイントは2箇所だけ!

bento box by josey4628, on Flickr Wpマルチサイト化(

記事を読む

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/ 編集ツールからやたら遠いイメージ図をクリスタのポーズくんで描いてみた。

WordPress4.5に更新したら、[ビジュアル][テキスト]タブの切り替えができなくなった!原因は「HeadSpace2」でした(・▽・)/

不具合ページサンプル(出演:クリスタのポーズさん) 登場人物:くつきちよこ ※管理人   佐藤

記事を読む

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!奥の手! 【アプリケーションの初期化】を試す価値あり!※自己責任でお願いします。

WpBlog(ワードプレス)のトラブルで万策尽きて「しかたない削除するか……」と思っている方、待って!

くつきちよこ年末のご挨拶バージョン   登場人物:くつきちよこ ※管理人 

記事を読む

Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 アイキャッチ画像 Lolita-kingyo illust by ss

3-Wpで電子書籍っぽいページめくり効果が使えるプラグインFlippingBook Galleryの使い方 見開きページの作り方

  追記:「WordPressの更新後、『FlippingBook Ga

記事を読む

Message

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

CAPTCHA


Time limit is exhausted. Please reload CAPTCHA.

  • 創作クラスタ応援し隊のくつきちよこ(崛起智世子)です。 このブログは、「ネット著 作権」、「セルフプロモーション」、「ワードプレス運用」、「電子書籍サービス」、 「自己出版(セルフパブリッシング)」、「創作」等に関する情報をお届けしておりま す。 ※Wiki『創作ステージ@まちペディア』(ちょっと押してますが)作成中です♪
  • follow us in feedly
  • くつキッチュ/スクラップス! on Tumblr

  • 「表現の自由を守る党」自作応援バナー くつきちよこ

『創作支援屋くつキッチュスクラップス!』は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。