03.28.2021

HTMLやPHPのコードをそのまま表示する方法

コードをそのまま表示させたいのに、HTMLやPHPを書くとコードがごっそり非表示になってしまったり、インデントのあるコードのインデントが消え、コードが左揃えになってしまって、困ったことがありました。 この記事では、それらを解決した方法をまとめました。 コードをそのまま表示する方法 まずは、HTMLやPHPをそのまま表示させる方法です。WordPressに標準搭載されているコードエディターやカスタムHTMLブロックを使います。 一番簡単なのはコードエディターを使うことです。特殊文字のエスケープなども必要なく、そのまま表示してくれました。 カスタムHTMLだと特殊文字のエスケープが必要ですが、コードエディターの場合はその一手間が要らないようです。一つずつ説明します。 コードエディターにPHPを書いた場合 例えば<?php echo 'hello!'; ?>というコードを表示させたいとして、コードエディターに <?php echo 'Hello!'; ?> と書くと、下記の通り表示したいコードをそのまま表示してくれます。HTMLも同様。 <?php echo 'Hello!'; ?> 少し前まではこれでも表示されなかったような気がするのですが、最近のWordPressのアップデートで仕様が変わったのかもしれません。以前はコードエディターに書いて、それをカスタムHTMLブロックに変換し、「 < 」や「 > 」を「&lt;」や「&gt;」などでエスケープさせてようやく表示ができました。 とてもとても手間だったので、嬉しいアップデートです。 メモ コードエディターの場合は<pre><code>を自分で書く必要は無く、表示したいコードをそのまま書きます。 カスタムHTMLにPHPを書いた場合 一方で、カスタムHTMLに <pre><code><?php echo 'Hello!'; ?></code></pre> と記述すると、コードがまるまる非表示の状態になります。(カスタムHTMLの場合には<pre><code>タグが必要です) 表示されませんが、記事を書いている画面ではここ( )にコードが書かれています・・・ カスタムHTMLブロックでコードをそのまま表示させるには、表示させたいコード中の「 < 」などの特殊文字を「エスケープさせる」必要があります。こちら( )は「<?php」の「<」を「&lt;」と書いたものです。 <?php echo 'Hello!'; ?> (カスタムHTMLブロックへの実際の記述) <pre><code>&lt;?php echo 'Hello!'; ?></code></pre> 何故かは分かりませんが、「 > 」はエスケープさせなくても大丈夫みたいです(場合によるのかも)。<pre><code>タグは表示されなくて良いので、エスケープしません。 上記のように特殊文字をエスケープさせれば、カスタムHTMLブロックでもコード表示ができますが、コードが多いときはとても大変です。なので、コードエディターがおすすめです。 <pre><code>タグにクラスを追加したい場合 こちらの記事で紹介した「コードに色を付けて綺麗に表示してくれる機能」ですが、たまに言語が正しく認識されず、<pre><code class="php">...</code></pre>のように、クラスで言語名を指定したいときがあります。 その場合は下記のように対応しています。 一旦コードエディターにコードを書く カスタムHTMLブロックに変換する(適宜特殊文字が自動的に変換される) <pre class="wp-block-code"> を <pre> にする <code> を <code class="言語名"> にする コードエディターからカスタムHTMLブロックに変換すると、「無効なコンテンツが含まれています」のような注意喚起の文が表示されるのですが、「HTMLに変換」で大丈夫です。 また、カスタムHTMLブロックに変換した時点で「 < 」や「 > 」が「 &lt; 」などの文字列に自動的に変わってくれていて、それ以上何もしなくてもカスタムHTMLブロックのままコードが表示されるようになります。 また、手順「3」と「4」は highlight.js のマニュアル通りに<code>に言語名のクラスを追加していますが、<pre>タグに言語名を指定しても同じでした。なので、上記手順「3」の時点でクラス名を言語名に変えるだけでも良いかもしれません。 とりあえず今のところはマニュアル通りに<code>タグで言語名を指定してみています。 インデントを保つ方法 コードエディターが大活躍してくれることは分かったのですが、一つ大きな悩みが残りました。インデントのあるコードを表示させようとすると、大切なインデントが全て消えてしまうことです。 <div class="greetings"> <p>Good morning.</p> <p>Good afternoon.</p> <p>Good evening.</p> </div> より読みやすい、整理されたコードを表示したいので、個人的にインデントは消えてほしくないのですが、WordPressの機能の一つ「自動変換」のような機能が働いて行頭の空白をありがたくも削除してくれちゃうみたいです。(Pythonなんかは見た目どうこうじゃなくて、インデント自体が重要なときがありますよね。) functions.phpにこの自動変換機能?を止めるコマンドを書いたら良い、TinyMiceを使って設定を変えたら良い、などいろいろ情報があったので試してみたのですが、私の場合上手く行きませんでした。 コードエディター → カスタムHTMLに変換 私の場合、この悩みを解決してくれたのは コードエディターにコードを書く カスタムHTMLブロックに変換 <pre class="wp-block-code"> のクラスから「"wp-block-code"」を削除する  重要! ( 必要に応じてクラス名やインデントなどを編集 ) という、一つ前でも触れた手順です。 (HTMLやPHPでなければ、最初からカスタムHTMLブロックに<pre><code>表示したいコード</code></pre>という具合でインデント付きのコードを貼ってもちゃんと表示されるみたいです。) …

wordpress
02.14.2021

RSSフィードをサムネイル付きで表示する

いろいろあってブログを2つに分けて運営することになり、片方の更新情報の一部をもう片方に引っ張りたいと思うようになりました。 「RSSフィード」というものを引っ張ってくればいいらしい、というところまではスムーズだったのですが、試してみるとタイトルや日付、記事の要約は表示できるものの、サムネイルが出てこない(別に良いのだけど、やっぱり少し寂しい)。 これがデフォルトなんですね。 調べて調べて試しまくること半日以上、何周も周って下記の参考ウェブサイトで紹介されている方法を素直に試し直したところ、いとも簡単に表示されました(私の半日は何だったんだ笑)。やっぱりエンジニアさんはすごいですね。最初から書いてある通りにやれば良かったです。 参考にさせていただいたウェブサイト: RSS フィードにアイキャッチ画像を含めて別のサイトで表示する 素直にやらなかったが故につまづいたところを含めつつ、RSSフィードをサムネイル付きで表示する方法をメモに残しておきます。参考にさせていただいた上記のコードから、私に必要な部分のみ使用しました。 (お試しの際はバックアップを取るなど、慎重に行ってください。) 1. 引用元のサイト: RSSフィードの配信内容を追加 テーマディレクトリにfeed-rss2.phpをコピー・追記 サイトのRSSフィードで配信する内容は「feed-rss2.php」に書かれているようです。これはWordPressをインストールしたディレクトリにある「wp-includes」というディレクトリに入っています。 ただ、そちらに書いたものはWordPressのアップデートの度にカスタマイズで追記したコードが消えてしまうので、feed-rss2.phpのファイルをそのまま使用中のテーマディレクトリにコピーし、下記(「ここから追加」〜「ここまで追加」)を追記します。 <item></item>のタグ内ならどこでも良いようなのですが、<guid></guid>の後に追記されている方が多い印象でした。 <guid isPermaLink="false"><?php the_guid(); ?></guid> <!-- ここから追加 --> <?php if ( has_post_thumbnail() ) : $thumb_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'thumbnail'); ?> <thumb><url><?php echo $thumb_url[0] ; ?></url></thumb> <?php endif; ?> <!-- ここまで追加 --> <?php if ( get_option( 'rss_use_excerpt' ) ) : ?> functions.phpに追記 上記のfeed-rss2.phpを使用することを指定。これをしないと、引き続きデフォルトのfeed-rss2.phpが使用され、RSSフィードの配信内容に変化はありませんでした。 remove_filter('do_feed_rss2', 'do_feed_rss2', 10); function custom_feed_rss2(){ $template_file = '/feed-rss2.php'; load_template(get_template_directory() . $template_file); } add_action('do_feed_rss2', 'custom_feed_rss2', 10); メモ 3行目: 上記のfeed-rss2.phpを置いた場所によりパスは異なる 4行目: 子テーマを使用している場合は「get_template_directory()」ではなく「get_stylesheet_directory()」に変更 引用元に追加する変更は以上です。これでサムネイルが配信内容に含まれ、表示させたいサイトに引っ張る準備ができました。 2. RSSフィードを表示したいサイト: 次に、RSSフィードを表示させたいサイト側での作業です。 私はここでかなりつまづきました。 上記の参考サイトでは、何やら「RSS & Atom Feeds for PHP」という、PHPで簡単にRSSフィードを読み込めるライブラリを使う、と書かれているのですが、私は「あんまり余計なものは増やしたくないな」と、ここをすっとばしました(←大間違い)。 これが、全く「余計なもの」ではなく、後述のコードを使うには「必要不可欠なもの」でした・・・ 「RSS & Atom Feeds for PHP」をダウンロード GitHubで公開されている「RSS & Atom Feeds for PHP」というライブラリをダウンロードします。私の理解では、これがないと後述のコードが上手く機能しません。 ダウンロードした.zipファイルを解凍し、srcフォルダ内にある「Feed.php」を自分の使用テーマの任意の場所にアップロード。 表示させたい場所にコードを記入 後は、RSSフィードを表示させたい場所に下記コードを記述することで、無事にサムネイル付きのフィードを表示することができました。私の場合はarchive.phpに記述しました。 <?php require_once TEMPLATEPATH . '/Feed.php'; // Feed.phpを置いたところまでのパス …

wordpress
02.13.2021

ワードプレス: タグクラウドのカスタマイズ

このウェブサイトはWordPressを使って作成しています。 ちょこちょこカスタマイズをしているので、メモにしました。今回はタグクラウドに関するカスタマイズ。いろいろ試してみて、最終的にはこのような感じに落ち着きました。 Before After functions.phpやstyle.cssに追記した内容は下記です。 ※ もしお試しになる場合には、特にfunctions.phpをいじる際、自己責任においてお試しください。 カスタマイズしたいと思った部分 私の使用しているWordPressテーマのタグクラウドはデフォルトだとこんな感じでした。右側のタグクラウドは「<?php the_widget('WP_Widget_Tag_Cloud'); ?>」で任意の場所にタグクラウドを表示したものです。 ここが気になる 投稿数によりフォントサイズが違う → functions.php the_widget( )で呼び出すタグクラウドも投稿数を表示したい → functions.php 文字色がaタグの色になっている(右のタグクラウド) → CSS hoverしているときのリンクの色の変化 → CSS どれがひとつのタグ名なのか分からない → CSS タグのアイコンをつけてみようかな → CSS とりあえずフォントの大きさや投稿数を表示するところから始めました。 フォントサイズ・投稿数表示 フォントサイズ: 下記のコードで簡単に統一されました。 投稿数の表示: 私の場合、PHPで任意の場所に呼び出すタグクラウドは、functions.phpに「$args['show_count'] = true;」を別途指示する必要がありました。 参考: WordPress公式ページ — widget_tag_cloud_args 書き込む場所: functions.php /* タグクラウド カスタマイズ */ function my_widget_tag_cloud_args($args) { $args['largest'] = 0.75; //フォント最大サイズ: 単位は下記の'unit' $args['smallest'] = 0.75; //フォント最小サイズ: 単位は下記の'unit' $args['unit'] = 'rem'; //フォントサイズの単位 $args['show_count'] = true; //タグの投稿数表示の有無 return $args; } add_filter('widget_tag_cloud_args', 'my_widget_tag_cloud_args'); サイズが整い、the_widget( )で呼び出すタグクラウドにも投稿数が表示されるようになりました。 リンクの色やタグの配置等 次に色や各タグの配置をもう少し整えたいので、下記をstyle.cssに書き込みました。 書き込む場所: style.css /* タグクラウド カスタマイズ */ .tagcloud { display: flex; flex-wrap: wrap; } .tagcloud a { border: 1px solid #ddd; /* 各タグを囲む枠線の色 */ border-radius: 2px; /* 枠線の角の丸み */ color: #555; /* …