jQuery Mobileテーマでアップした画像やPDFのリンクがundefindになってしまう

2013年7月12日

現在、弊社契約のお客様については随時スマホ閲覧用にjQuery Mobileを活用したテーマ使用への切り替えをすすめているのですが、

jQuery MobileとWordPressの組み合わせから起こる問題で、
投稿フォームからアップされた画像に拡大サイズの画像が自動リンクされている場合、
投稿フォームからアップしたpdfファイルとテキストをリンクされている場合、
jQuery Mobileは「undefine」のプログラムエラーになってしまいます。

この回避策ですが、

投稿フォームからアップされた画像に拡大サイズの画像が自動リンクされている場合は
そもそもスマホではページ上にある画像がスマホの横幅に満たないときはダブルタップするか、ピンチすることでズームできる機能があるので、画像にかかっている拡大サイズ画像へのリンクを無効にするのがよいと判断しました。

具体的にはスマホ用テーマのfunction.phpでaタグで拡大画像のリンクをimgタグから外してしまうという、というソースを書きました。

(↓スマホ用のテーマ側のfunction.phpに書き足す↓)

<?php
add_filter( 'the_content', 'attachment_image_link_remove_filter' );

function attachment_image_link_remove_filter( $content ) {
$content =
preg_replace(
array('{<a(.*?)(wp-att|wp-content\/uploads)[^>]*><img}',
'{ wp-image-[0-9]*" /></a>}'),
array('<img','" />'),

$content
);
return $content;
}
?>

 

投稿フォームからアップしたpdfファイルとテキストをリンクされている場合は、
そもそもjQuery Mobileを使用しているときは画像やpdfなど、HTMLでは無いファイルへリンクするときはaタグに rel=”external” が無ければ「undefine」になるので、

スマホ用テーマのfunction.phpでpdfファイルにリンクするaタグにだけrel=”external”を追加するソースを書くことにしました。

具体的にはaタグのなかの「.pdf”」を「.pdf” rel=”external”」に置換するというものです。

(↓スマホ用のテーマ側のfunction.phpに書き足す↓)

<?php
add_filter( 'the_content', 'attachment_pdf_external_filter' );

function attachment_pdf_external_filter( $content ) {

$content =
str_replace('.pdf"', '.pdf" rel="external"', $content);
return $content;

}
?>
ページトップへ