スマートダディ目指して修行中。>WordPressカスタマイズしてソースコードをプラグイン無しで表示...の改良。2015/02/08ここ最近、WordPressをカスタマイズするネタをアップしていますが、実は、以前作成したソースコード表示機能に不具合が見つかり、ひそかに悶絶していました。WEBサイトでHTML系ソースコードを表示するのは面倒HTMLのソースコードをブログに書くと書式として認識されちゃうブログでのソースコードの表示は意外に面倒です。HTMLで表示する場合、HTMLデータそのものもテキストデータで、いくつかのキャラクターは特別な意味を持っています。そのため、「<」(引っかからないように全角で書いています)等のキャラクターは、あらかじめ「&lt;」などの文字列に置き換える必要があります。しないと、HTML文法の「<h1>」などの書式と誤解されてしまい、期待しない表示になってしまいます。いって、記事を書くときに毎度毎度HTMLに引っかかってしまう文字列を手動で変換して書くのは大変です。後から編集する時も一苦労です。WordPressを使われている多くの方は、プラグインを使って解決しているかと思います。お手製ソースコード表示プログラムソースコード表示をするためのプラグインをいくつか試してみたのですが、何だか高機能すぎて使いにくそうだったため、SiSO-LABでは自前で開発してWordPressのショートコード機能を使って書式の変換をしています。プログラム開発の時間としてはなかなか楽しい時間で、「あちらを立てればこちらが立たず」を繰り返すハメになりました。結果、諦めた部分があったり、まだまだ改良はいるものの、とりあえず使えそうなものができました。WordPressの無料テーマGushをカスタマイズ。2014-07-09「<li>」で不審な改行しかし、今回のRSSに関連する表示機能のソースコードを掲載した時に変なところで改行が入ってしまうのを発見。「’」とか「<li>」付近で発生しています。WordPressの記事編集画面では、このように、「記事が見つかりません」付近は1行で記述しています。何やら機能不足なところがあるようです(実は、ダブルクォーテーション時も予期せぬ動きをしてしまうことが発覚し、不具合を見つけたまま放置しているのを、自分のブログから見つけました...)。ソースコード表示機能を改良してみる新しい関数を用意したら、これまた微妙なことに過去の記事で既にソースコード表示機能を使っていますので、過去記事に影響を与えないようにするため、新しい関数を作ることにしました。いうことで、コピペして関数名と登録するショートコード名を変えたものを作ってみたら微妙な事案が発生しました。以下のように(改行が入って変ですが)表示されていたのですが、このように、アポストロフィが制御コードに変換されてしまいました。うーん、関数をコピペして名前変更しただけなんですけど、どうしてなんでしょうね...。一度、functions.phpをしっかりと再点検した方がいいかもしれません。これもまたそのうち解決しないといけない問題だと思いますので、ダブルクオーテーション表示の時の改行も合わせて見直します。そんなこんなで、しょうがないので既存の関数をいじることにしました。余分な改行の発生源、WordPressっぽい正直言うと、全然、見当がついていなかったため、闇雲にアポストロフィ(「’」)を制御コードで書いてみたり、いやいや、大なり小なり記号のソバにあるのが悪いのかもと、こっちの記号の方をいじくってみたりしたのですが、一向に改善しません。そんなわけで焼酎のお湯割り飲みながらあれこれ考えてみました。自分の過去記事を読み直していたら、「<p~」と「<p/~」についてですが、この文字列があるだけでなぜかWordPressの方で改行してしまうため...」と書いてあるのを発見。この機能(ショートコード)が実行される前に既に改行されているかもしれません。WordPressって、テキストモードで編集していても実際にHTMLコードを吐き出す時は改行やらなんやら入れてくれます。そんなわけで、このショートコードが実行される前の時点で、既に開業が入っている可能性があります。いうわけで、以下のようなコードを加えてみました。);1行目は「アポストロフィ、改行、<」という順番で文字列が来たら「アポストロフィ、<」に変換するというもので、2行目は「>、改行、改行、アポストロフィ」と来たら「>、アポストロフィ」と変換します。全体としてはこんなコードになりました。ソースコードを[code]~[/code]で括ります(括弧はショートコードに反応しないように全角で記載していますが、半角で記述してください)。);実行結果は期待通り!ばっちり表示されました。うーむ、これだとまだ欠点有だなこれだと、本当に「アポストロフィ、改行、<」という順番で文字列が来た時も「アポストロフィ、<」と変換されてしまいます。いうコードを書くことは無いと思うので、とりあえずこれで行こうかと思います。以前、「<p~」の自動改行で悩みましたが(過去記事を読んだら書いてあったので、きっと、悩んだんでしょう)、同じ方法で解決できそうです。完璧な対処方法ではありませんが、結構いいかも。いうか、そろそろ有名どころのプラグインにしようかなぁ。それともWordPressの勝手改行を機能を無効化するプラグインを探してみようかな。なんだけどね...こんな風に悩んだり調べたりするのも、それはそれで楽しかったりしますが、時間が迫っているとちょっとヒヤヒヤします。時間があったらな~、と思いつつ、でもきっとたくさん時間があったらのんびりしちゃうかも。WordPressをカスタマイズしてプラグイン無しでソースコード表示に挑戦♪ブログ等でソースコードを表示するのは案外めんどくさいものです。HTMLコードの場合、タグがタグとして動作してしまい、ソースコードとして表示できないこともあります。WordPressではプラグインを使ってうまく表示させることができますが、ビギナーなSiSOにとって程よい難易度でおもしろそうなので自力実装挑戦中です。WordPressの無料テーマGushをカスタマイズ。WordPressの無料テーマGushをカスタマイズ。WordPressの無料テーマGushをカスタマイズ。WordPressカスタマイズしてソースコードをプラグイン無しで表示...の改良。LINKTweetPocket関連前後記事PREV:WordPressで外部ブログのRSSを表示したら日付が1日ずれちゃう。タイムゾーンの問題?NEXT:WordPress初心者がブログを作るよ♪。カスタマイズ向け国産無料テーマ(テンプレート)Gush2のインストール関連記事2014.05.18WordPressの無料テーマGushをカスタマイズしてSiSO-LAB色に~リンク、キャッチフレーズ、公開日背景の色変更2016.04.16新しいWordPressブログを準備中。カスタマイズ向き国産テンプレートGush2と定番プラグインの話とか。2015.03.07WordPress初心者がブログを作るよ♪Gush2の「NEWエントリー」を「最近の投稿」に変更したり、カテゴリとタグの使い分けに悩んだり。...」で失敗する場合の対処方法。2014.07.14記事に別の記事を挿入する機能をプラグインなしで実装。WordPressの無料テーマGushをカスタマイズ。2015.03.27WordPress初心者がブログを作るよ♪メニューを作ってみたり、項目の順番を変えてみたり。2014.05.15Gushのヘッダー画像と代替テキストの設定、ついでにFaviconを変更する方法とか。Gush(WordPress無料テーマ)カスタマイズ2017.03.17WordPressで記事引用を簡単に表示しちゃう方法...WordPress4.4から埋め込み(embed)機能に対応していたのね。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。date*PREV:WordPressで外部ブログのRSSを表示したら日付が1日ずれちゃう。タイムゾーンの問題?NEXT:愛用のデジカメ・DMC-FZ28のバッテリーが寿命っぽいんで新調。互換品で値段の安いバッテリーだけど性能はどうかな?PROFILESiSO-LAB所長兼研究員のSiSOです。あ、趣味のサイトなので実体はありませんけど...。「結果は大事だけど、やっぱり経過を楽しみたいよね!」ということで、雑多な内容で紆余曲折試行錯誤している様子を楽しんで頂ければ幸いです。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。「たいせつなともだち」ピアノ譜アレンジ中。譜面はベネッセで無料プレゼントしています。関連人気記事WordPressの画像ファイル保存先ってどうなっているの?保存先の変更方法とか。投稿されたFFFTPでメディアファイルを一括ダウンロードできない?設定変更で回避する方法とか。投稿されたやっぱり簡単だった!無料で透過マルチアイコンを作る方法。サイトにFaviconつけてゴキゲン。投稿されたWordPressで記事引用を簡単に表示しちゃう方法...WordPress4.4から埋め込み(embed)機能に対応していたのね。投稿されたWordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。投稿されたローカル環境にセットアップしたWordPress(XAMPP上)の表示確認を、他のパソコンやスマホからアクセスする方法とか。投稿されたアイキャッチ画像をRSSで表示できるようにWordPressをちょっとカスタマイズしてみる。ネットオウル関連新着記事ネットオウル(レンタルサーバー)のWordPressへ海外からログインする方法。海外から実験してみました。2018.03.07WordPressのoEmbed、表示されない時があって不安定?なのでプラグインPz-LinkCardにしてみたよ。2017.10.21WordPressで記事引用を簡単に表示しちゃう方法...WordPress4.4から埋め込み(embed)機能に対応していたのね。2017.03.17WordPress、サイトのアイコン表示は標準機能だけで設定できるのね...小さな画像でも大丈夫。2016.04.18新しいWordPressブログを準備中。カスタマイズ向き国産テンプレートGush2と定番プラグインの話とか。2016.03.07WordPressローカル環境を簡単に2クリックだけでインストールする方法。2016.03.05多趣味なブログ運営は分けるべき?サブドメインがいい?ディレクトリがいい?方針検討中。プラグインでWordPress記事のパーマリンクを別サイトのURLに設定する方法。PC百均浪漫/SiSO-LAB更新情報ダイソー光沢紙のはがき(郵便番号枠入り)インクジェットプリンタ、4年経ってもパッケージ変わらずの定番商品。2019.10.01なんと3個で100円!(税抜)、煮豚風煮たまご、お買い得だね!おつまみ、ラーメンのチョイ足しに。タイマーとかってLR44ばかりじゃないのね。2019.09.06ポイントカード等の整理に便利かな。