現行テーマをレスポンシブに対応させてからはじめて、先日Youtube動画を埋め込んでみたのですが、スマートフォンで見ると動画だけが画面からはみ出してレスポンシブじゃないことに気付いてしまいました。
単純に「max-width: 100%;」を適用するだけではうまくいかないようです。
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
}
.youtube iframe {
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}
というふうに、16:9の縦横比をもった<div class="youtube">で包んだうえで、iframeにもCSSを適用してやるとレスポンシブになるようです。
でも、毎回そんな面倒なことをしたくない…
というわけで、プラグインを使ってみることにしました。そんなプラグインがあるのか?
「wp-koyomi」は旧暦・六曜・24節気を表示させるプラグイン。以前、PHPのバージョンアップのときに動作しなくなってアンインストールしたのですが、やっぱり寂しくなってムリヤリ使ってみることにしました。
13年近く更新されていないプラグインなので、安全かどうかはわからないのですが、あまりコアに深く刺さるようなプラグインではないので自己責任で使います。
さて、まずはPHPコードの構文チェックを行いました。使ったのはこのサイト。
ここに現行プラグインのソースをぺたっと貼り付けて、どこで引っかかるのかを調べます。
先日、PHPでランダム選択問題を出す仕組みを作ってみたのですが、やっぱりというか、問題ごとにファイルを作るのがとてもめんどくさい…。
というわけで、もう少し実用的なものにすることにしました。構成としては「出題のファイル」「答え合わせのファイル」「スタイルシート」「問題・選択肢・正答・画像パスのCSV」という4枚で収めようと思います。
常時SSL化が当たり前になってきたのでhttpからhttpsに.htaccessを使ってリダイレクトさせることが多いのですが、どうしても下層フォルダの一部だけをフィーチャーフォン(ガラケー)のためにhttpでアクセスできるようにする必要が発生しました。
まずは現状のリダイレクト。
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
.htaccessファイルに上記のコードを記述し、ルートディレクトリに置いて、httpからhttpsに301リダイレクトさせています。
301リダイレクトではない場合は、
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]
ですが、これは使ったことないですね。
さて、ある下層フォルダ(ディレクトリ)だけhttpを通したいということで、そのフォルダ内にも.htaccessファイルを用意して、以下のように記述します。
RewriteEngine Off
これで、このフォルダだけリダイレクトを除外することができましたー。
今まで、サイドバーの「最新の記事」に表示される記事名には、アイキャッチ画像を設定しているときはサムネイルが付くようにしていました。
アイキャッチ画像がないときは、文字しか出ないというわけですね。ちょっと寂しいかな。
この部分のPHPはこんな感じ。
<h2>最近の記事</h2>
<ul id="recent">
<?php $posts = get_posts('numberposts=20'); ?>
<?php foreach($posts as $post): ?>
<li>
<span class="eye"><a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(40,40), array('class' => 'left')); ?></a></span><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
「the_post_thumbnail」関数でアイキャッチ画像を呼び出しています。
「もしアイキャッチ画像がないときは、あらかじめ指定しておいた画像が出るようにしたい。」ということで、以下のように改造してみました。
<h2>最近の記事</h2>
<ul id="recent">
<?php $posts = get_posts('numberposts=20'); ?>
<?php foreach($posts as $post): ?>
<li>
<span class="eye">
<?php if(has_post_thumbnail()): ?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(array(40,40), array('class' => 'left')); ?></a>
<?php else: ?>
<a href="<?php the_permalink(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/images/no_thumb.jpg" alt="" width="40" height="40"></a>
<?php endif; ?>
</span>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</li>
「if(has_post_thumbnail()」で条件分岐させ、「もしアイキャッチ画像があるときは、アイキャッチ画像を表示する。そうでないときはno_thumb.jpgを表示する。」としてみました。
こんなふうに表示されるようになりました。
文字の頭が揃って、ちょっと整った感じがしますネ。
ちょっと味気ない画像なので、そのうち変えるかもしれませんが、当分はこのままで。