ブログカードで日本語URLを日本語で表示する方法

Pz-LinkCard プラグインのブログカードでは、日本語を含むURLは日本語で表示されない。

urlencode された読解不可能な長い文字列になる。

 

 

 

このブログカードの下部の引用先アドレスURLの部分。

 

例えば、

  • https://makotoiwasaki.com/ドリアン農園.html

 

と表示されてほしいのに、

 

  •  https://makotoiwasaki.com/2019/07/

    %e3%83%89%e3%83%aa%e3%82%a2%e3%83%b3%e8%be%b2%e5%9c%92.html

 

と表示されてしまう。 

どちらが良いかは日本人なら一目瞭然である。

 

そして、記事作成編集時に、

 

*<p>https://makotoiwasaki.com/ドリアン農園.html</p>

と日本語が含まれるURLは、ブログカードに変換する対象から除外されている。

常にエンコードされた、

*<p>https://makotoiwasaki.com/2019/07/

%e3%83%89%e3%83%aa%e3%82%a2%e3%83%b3%e8%be%b2%e5%9c%92.html

</p>

 

と一行に記述しなければならない。

これを日本語そのままのURLでもブログカードに変換されるようにしてみる。

 

Pzカード管理画面、「リンクカード/DBキャッシュ管理」画面でも日本語URLはエンコードされていて読めない。

 

これらの症状、鼓動はCocoon テーマ付属機能のブログカードでも同じである。

引用先アドレスURLを日本語表示する方法

420行目付近に、

$url_decoded = urldecode($url); // 日本語化リンク名

と追加する。

		// URLパース(ドメイン名などを抽出)
		$url_m			=	parse_url( $url );
		$scheme			=	$url_m['scheme'];						// スキーム
		$domain			=	$url_m['host'];							// ドメイン名
		$domain_url		=	$scheme.'://'.$url_m['host'];			// ドメインURL
		$location		=	substr($url, mb_strlen($domain_url));	// ドメイン名以降
		$url_decoded	=	urldecode($url);	// 日本語化リンク名

 

そして、これが表示される部分、

781行目付近を次のように変更する。

 

		// リンク先URL
		$url1			=	'';
		$url2			=	'';
		if ($this->options['display-url']) {
			if ($this->options['display-url'] == '2') {
				$url2	=	'&nbsp;<div class="lkc-url-info"><cite>'.$st_op.$a_op.$url_decoded.$st_cl.$a_cl.'</cite></div>';
			} else {
				$url1	=	'<div class="lkc-url"><cite>'.$st_op.$a_op.$url_decoded.$st_cl.$a_cl.'</cite></div>';
			}
		}

これでURLが日本語で表示され、わかりやすくなる。

日本語URLがブログカードに変換されるようにする方法

266行目付近の正規表現に、

\p{Hiragana}ー。、\p{Katakana}\p{Han}

と挿入する。は長音。

			if ($this->options['auto-url']) {
$content	=	preg_replace( '/(^|<br ?\/?>)(<p.*>)?(https?:\/\/[-_\.!~*()a-zA-Z0-9\p{Hiragana}ー。、\p{Katakana}\p{Han};\/?:\@&= \$,%#] )(<\/p>|<br ?\/?>)?$/imu', 'pz-linkcard-auto-replace url="$3"', $content);
			}

 

285行目にも同様に、

\p{Hiragana}ー。、\p{Katakana}\p{Han}

挿入する。

			if ($this->options['auto-url']) {
preg_match_all('/(^|<br ?\/?>)(<p.*>)?(https?:\/\/[-_\.!~*()a-zA-Z0-9\p{Hiragana}ー。、\p{Katakana}\p{Han};\/?:\@&= \$,%#] )(<\/p>|<br ?\/?>)?$/im', $content, $m );

これで、漢字、ひらがな、カタカナの含まれたURLは、ブログカードへの変換対象となる。

一行の先頭からURLを貼り付ける。htmlソースでは、

<P>URL</p>

となるようにする。

Pzカード管理画面でURLを日本語表示する方法

Pzカード管理画面、「リンクカード/DBキャッシュ管理」画面でも日本語URLはエンコードされていて読めない。

これを作者本来の意図するところの日本語のURLで標示されるようにするには、編集で、

 

pz-linkcard/lib/pz-linkcard-cacheman-list.php

を次のように変更する。

295行目付近: $disp_url = urldecode($url);

 

	$url		=	esc_url($data->url);
	$disp_url	=	urldecode($url);
	$domain		=	$data->domain;
	// 日本語ドメイン対応

 

これだけで日本語でURLが表示され、わかりやすくなる。

記事編集画面で日本語URLを貼り付けた時に日本語URL表示にする方法

ブラウザーのアドレス欄からURLをコピーペーストした場合、

Edge では日本語URLのまま表示されるが、その他のブラウザー(chrome, firefox, opera)ではurlencode された意味不明なURLが表示される。

それで、Wordpressの記事編集欄にペーストすると、後で見返した場合にどの頁のことなのか識別困難になる。

これをurldecode した状態、日本語URL表記に変換する仕組みを追加する。記事の更新時にURLデコードされる。

 

//記事更新時にurldecodeする。
function filter_handler( $data , $postarr ) {
	$data['post_content'] = urldecode($data['post_content']);
  return $data;
}
add_filter( 'wp_insert_post_data', 'filter_handler', '99', 2 );

特にurlencode された文字列を表示したい場合には、全角文字にすればよい。

 

以上で、Wordpressでの記事編集時にも意味不明な文字列は表示されなくなる。

記事の閲覧者も意味不明な文字列を目にする機会が皆無になる。

 

Cocoonでも日本語URLをブログカード化

ついでに、Simplicity, Cocoon テーマ付属機能のブログカードでも同様に日本語URLをブログカード化できるようにしてみる。

外観→テーマエディターから編集可能。

ファイルのパーミッションを666に変更しておく。

 

lib/blogcard-in.php

188行目付近に、

\p{Hiragana}ー。、\p{Katakana}\p{Han}

を追加。

//本文中のURLをブログカードタグに変更する
if ( !function_exists( 'url_to_internal_blogcard' ) ):
function url_to_internal_blogcard($the_content) {
  $res = preg_match_all('/^(<p>)?(<a[^>] ?>)?https?:\/\/'.preg_quote(get_the_site_domain()).'(\/)?([-_.!~*\'()a-zA-Z0-9\p{Hiragana}ー。、\p{Katakana}\p{Han};\/?:\@&= \$,%#] )?(<\/a>)?(<\/p>)?/imu', $the_content,$m);
  //_v($m);
  foreach ($m[0] as $match) {

 

lib/blogcard-out.php

34行目付近に、

\p{Hiragana}ー。、\p{Katakana}\p{Han}

を追加。

//本文中の外部URLをはてなブログカードタグに変更する
if ( !function_exists( 'url_to_external_blog_card' ) ):
function url_to_external_blog_card($the_content) {
  //1行にURLのみが期待されている行(URL)を全て$mに取得
  $res = preg_match_all('/^(<p>)?(<a[^>] ?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9\p{Hiragana}ー。、\p{Katakana}\p{Han};\/?:\@&= \$,%#] (<\/a>)?(?!.*<br *\/?>).*?(<\/p>)?/imu', $the_content,$m);

 

 

 

  • 6 views
    Pjax で非同期画面遷移するWordpress テーマ Pjax Blog に変えてみた。 Pjax Blog テーマでは、Barba.js が使用されている。 Pjax Blog | Uniqu ...
  • 17 views
    WordPressの投稿記事は、誤字脱字を少し修正しただけでも更新日時が変更されてしまう。 誤字の訂正だけで3年前の記事の更新日が更新されてしまうのはおかしい。 目次 1 編集画面に更新日時の変更オプ ...
  • 81 views
    これまで remodal.js を使ってハンバーガーメニューのモーダルメニューウィンドウが開いていたのを、CSSだけで動くようにした。 header.php 内の3本線のハンバーガーメニューを表 ...
  • 73 views
    CSSを遅延読み込みするためには、preload を使えばよいのだが、Firefox 、IEブラウザーでは動作しない。 それで、loadCSS   cssrelpreload.js を併用する。 ...
  • 75 views
    Jpeg 画像をWebp形式に変換するとサイズが30%も減少するなどと説明されていることがよくある。 Webp 変換後のサイズの方が大きくなったというのは見つからなかった。 そこで、Webpに変換して ...
  • 63 views
    画像のサムネイルを再作成する時には、Regenerate Thumbnails 等のプラグインを使用しがちであるが、サーバーにSSHでログインできるならば、コマンドラインで同じことができる。 その方が ...
  • 70 views
    画像をWordpressにアップロードした時に、予め登録しておいた画像のタグ、キーワードが表示されるようにしたい。 Lightroom で画像を整理する時に、キーワードを登録すると、Windows の ...
  • 63 views
    サイトの頁ソースを見ると、日本語を含むURLリンクが全てエンコードされていて読めない状態なのが気になった。 これはWordpressの仕様で、日本語で出力しようとしても、最後にはエンコードされて出力 ...

タグクラウド

WordPress カテゴリ人気記事

タグ関連記事