【WordPress】記事にソースコードを表示するCrayon Syntax Highlighterを導入してみた

Swiftでアプリを作っていくので記事にソースコード表示するプラグインが欲しい!

ということでCrayon Syntax Highlighterを導入してみました。

 

プラグインから新規追加で調べれば出てきますよ〜

インストールが終わるとすぐに利用できるようになります!

実際に記事投稿画面を見てみると・・・

スクリーンショット-2015-11-25-16.40.04

 

新しく<>マークが増えています!

 

これをクリックすると

スクリーンショット 2015-11-25 16.39.50のコピー

 

入力画面が出てきます!

そして実際に適当なコードを載せてみると

        if (userDefaults.objectForKey("saveRoomArray") != nil){
            classRoomTest.removeAll()
            let objectsRoom = userDefaults.objectForKey("saveRoomArray") as? [String]
            //var testNameString:AnyObject
            for testNameStringRoom in objectsRoom!{
                classRoomTest.append(testNameStringRoom as String)
            }
        }else{
            for var i = 0; i < 40; i++ {
                classRoomTest.append("")
            }
        }

こんな感じ。

時間割アプリの一部です。しばらく離れていると忘れちゃいますね・・・

var str = "Hello, playground"
print(str)

こんな感じ。どうでしょうか。

わかりにくいですが2行目にハイライトしていますよ〜〜。テーマも変更してみました。

なによりSwiftに対応しているのありがたいですのう

 

 

挿入時にも設定をいじることができますが、設定タブからCrayonに行くと基本設定ができます。

スクリーンショット 2015-11-25 16.50.20のコピー

 

日本語に対応しているのがありがたいです。

 

こちらの記事を参考にさせていただきました!

【WordPress】投稿記事内にソースコードを綺麗に表示させるプラグイン Crayon Syntax Highlighter

 

これでこれからはメモが捗ります(^o^)わーい

 

2018/04/14追記 現在はprism.jsを使っています。
今はprism.jsに移行しました!

WP Code Highlight.jsをリニューアル途中まで使ってたんですが、gistとの相性が悪すぎてやめました。
というか、gistがなぜかうまく表示できなくて色々戦った結果WP Code Hightlight.jsを使うのを諦めました。
<pre>で囲んだだけでハイライトするのが結構厄介・・・。

たった数行のSwiftのコードが見てられない・・・・
ほ、ほら・・・Swift2とSwift4じゃ別言語だから・・・
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

Write a Comment

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。

Related Memo...

【WordPress】メディアライブラリ の画像IDを取得する

WordPressのメディアライブラリ にアップロードされた画像IDを取得する方法です。

例えば6件取得してギャラリーで表示するとき。

$ids = get_posts( 
    array(
        'post_type'      => 'attachment', 
        'post_mime_type' => 'image', 
        'post_status'    => 'inherit', 
        'posts_per_page' => 6,
        'fields'         => 'ids',
    ) 
);

$ids_str = '';
foreach ( $ids as $id ) {
    $ids_str .= $id . ',';
}

$ids_str = rtrim($ids_str, ',');

// ショートコードでギャラリーを表示
echo do_shortcode( '[gallery ids="' . $ids .'"]' );

意外と便利なのでは!

 

WordPress

【WordPress】プラグイン化したカスタム投稿をテーマ内で使うとき

通常テーマ内でカスタム投稿を表示させる時に

$args = array( "posts_per_page" => 5,
        "post_type" => 'news'
    );
$the_query = new WP_Query( $args );
if($posts):

と書けば表示されるのに、プラグイン化していたので表示されなかった話。

 

functions.phpでカスタム投稿を追加している場合は必要ないが、newsというカスタム投稿をプラグイン化していたので、以下の記述が必要でした。

    public function __construct() {
        add_action( 'pre_get_posts', array($this, 'add_my_post_types_to_query') );
    }

    // queryにnewsをセットする
    function add_my_post_types_to_query( $query ) {
        if ( is_home() && $query->is_main_query() )
            $query->set( 'post_type', array( 'post', 'page', 'news' ) );
        return $query;
    }

WordPressプラグインの作り方は、また後日ちゃんとした記事にしたいと思ってます。今回はとりあえず忘れそうなのでメモだけで失礼。

WordPress

WordPressで現在のカテゴリから親カテゴリ/祖先カテゴリのスラッグを取得

//現在のカテゴリを取得
$categories = get_the_category($post->ID);
$category_slugs = array();
foreach($categories as $category){
    $cat = $category;
    array_push($category_slugs,$cat->slug);
    //親のカテゴリがなくなるまで回す
    while ($cat->parent) {
        $cat_parent_id = $cat->parent;
        $cat = get_category($cat_parent_id);
        array_push($category_slugs,$cat->slug);
    }
}

わりと頑張ってPHP書いてる。

WordPress
more