雨過天晴

2017年ブログテーマ作りなおし時のコードのメモ!

2017.01.24

img from: ぱくたそ

この記事は2017年1月24日に書かれたものです。古い内容や非推奨要素を含む可能性がありますのでご注意ください。

何度か作り直しをしているので、テーマを作るにあたり、過去のテーマとか過去のメモからで大体のことは引っ張ってこられるようになりました。今回は(同人サイトではなく)久々に「ブログ(このブログです)」のテーマを作ったので、その時に探しまくったあれやこれやをメモ。です。

1. アイキャッチを縮小ではなくトリミングで表示させる

トップページでやっているように、横長のアイキャッチ画像をトリミングして、正方形っぽく出したい。
こんな感じで。
トリミング
背景で指定すれば割にサクッとできるけど、そうじゃなくて、普通に画像を表示させた状態でしたい。

WordPressのコードでどうこうではなくて、cssobject-fitでさくっと出来るのね。
一部ブラウザでは見えないらしいですが、個人的ブログだからまあいいか、と。

2. YouTube動画の縦サイズが短く切れる

WordPressのメディア追加でYouTube動画を埋め込み。
それ自体は簡単なんですが。
ショートコードembedでやってもiflameでやっても、横幅はいいけれど、なぜか縦が短く切れる…。こんなふうに……。

なぜだ……。

enbed width="" height=""でサイズを指定してみても駄目。
iflameのサイズを指定してみても無視されちゃって駄目。

どうやら、高さをちゃんと指定したdivでくくってやればいいらしい。

3. get_postsでoffsetを使うとページングがおかしい

get_postsでループ書いたらページネーションは出るのに1ページ目の内容しか表示されない。
……よくあるトラブルで何をいまさら、と言われそうですが、pagedを入れ忘れていたんですね。
で、入れたらね。
やっぱり1ページ目しか表示されないんですよ!なんで!?

最新の記事だけを大きく表示させるために、2つ目以降の記事を表示させるループにoffsetを使っておりました。どうやらpagedoffsetは一緒には動かない……ようです。

そうかなるほどー。
(うちは個人ページだからまあいいかと、1つめの記事だけをcssで非表示にしています)

4. プラグインを入れずに「よく読まれている記事」を出す

「Popular Posts」とか「よく読まれている記事」とか、まさかプラグイン無しでできるはずない……と思っていたのですが、出来るのね(驚いた)。

5. 公式ボタンを使わないTwitterボタン

公式ボタンを使わずに、twitterのリンクボタンを、記事へのリンク付きで出したい。

別に公式ボタンでもいいんですけどね、元のhtmlデータ作ったときにがっつりボタン部分も作っちゃったんですよねー…。ボタンは自作で、リンク部分を下記のようにします。ポップアップで開きたくない場合はonclick以降を削除です。

<?php $url_encode=urlencode(get_permalink()); $title_encode=urlencode(get_the_title()); ?>
<a href="http://twitter.com/share?url=<?php echo $url_encode ?>&text=<?php echo $title_encode ?>&via=アカウント名@は付けない&tw_p=tweetbutton&related="アカウント名@は付けない" onclick="window.open(this.href, 'window', 'width=550, height=450,personalbar=0,toolbar=0,scrollbars=1,resizable=1'); return false;">

一行目を忘れるとタイトルとかちゃんと表示されなくなるので要注意なのですよ。

6. 記事の一部を抜粋ではなくmoreタグの前まで整形なしで出す

検索結果で使ってるんですが、抜粋the_excerpt()ではなくて、moreの前までの本文を、整形なし(p、brタグ除去)で表示させたい。

moreの前までを出すのはthe_content()でできます。

これだとpとかbrで整形されたテキストが出てくるので、過去記事pとかbrとかのタグ書き換えや追加をさせないでやったみたいにタグを除去します(リンクタグaは出てきてしまうので、これは悩みどころ)。

<?php remove_filter('the_content', 'wpautop'); the_content('','false',''); ?>

今回はこんなふうにしています。


以上今回の困りごと6点でした。