WordPressにソースコードを綺麗に書く方法

はじめに

こんにちはKAZUYAN STUDIOのKazuyan(@Inafuku_Kazuya)です。

そろそろブログにコードを書いて技術的な記事を増やして行きたいと思っています。ただ、ここにコードを書いてしまうと実行されてしまったり綺麗にソースコードを書けない場合があるので、ブログにソースコードを書く方法を探しました。

そうしたらブロガー仲間である「@utano320」君のブログ記事に良さげな物を紹介していました。それがJavaScriptライブラリであるSyntaxHighlighterです。

ブログ上でコードを綺麗に表示したい。〜SyntaxHighlighterの導入〜 | Syntax Error.


WordPressで使用する方法について

大体は彼のブログ記事を読めばWordPressをカスタマイズできる。ただ、WordPressをカスタマイズして適用するにはテンプレートタグを使う必要があります。

手順は下記です。

▼下記サイトから「Click here to download」をクリックします。
zipファイルがダウンロードできるので解凍をします。

syntaxhighhlighter01

▼「scripts」と「styles」フォルダをアップロードします。WordPressで使用する場合は、使用しているテーマフォルダにアップロードしましょう。

僕だったら「lifelog」フォルダにWordPressをインストールしています。テーマは「brightpage」というテーマを使用しているので、アップロードする場所は下記になります。

その為「lifelog/wp-content/Themes/brightpage」のフォルダにアップロードします。皆さんの場合は「lifelog」がない、「brightpage」が別のテーマ名になると思います。

syntaxhighhlighter02

▼下記のコードを該当するheaderの中に入れます。大体はheader.phpの中に入れます。
ただ、この時にWordPressの場合は「<?php echo get_template_directory_uri(); ?>」というテンプレートタグを前につける必要があります。

このテンプレートタグはテンプレートのあるディレクトリ URI を取得するタグです。ようは使っているテンプレートのあるディレクトリをこれだけで表示する事ができます。

後、WordPressの場合はphpコードも書くと思うのでshBrushPhp.jsも入れておきました。

さいごに

これからバリバリWordPressで役立ちそうな記事を書いて行きます!

Leave a Reply

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

CAPTCHA