WordPressのテーマをXeoryBaseに変更しようとして諦めた人に試して欲しい事

XeoryBase ロゴ画像

テーマをXeoryBaseに変更しようとした、あるいは勢いで変更してしまった後で想定外の結果に「ウボァー」となった方は結構いたりするんでしょうか。

もしそうだとしたら、恐らくそれは問答無用で「記事一覧が全文表示になってしまう」事や「アイキャッチが記事の先頭に挿入される」せいではないかと思います。

そこで当エントリーでは根本的な解決には至らなくとも、その問題を見た目上だけでもムリヤリ回避する方法を私なりに考えてみました。

設定でオン・オフ出来ない強制的な仕様

いくつかのバリエーションから選択、もしくは設定で無効化する事が出来ればいいんですが、それが出来ないから困った事になっていると思われるポイントは主にこの2つだと考えられます。

記事一覧が全文表示になってしまう

現在主流と思われるほとんどのテーマでは、記事一覧をカードやグリッド形式で表示する事が多いです。その状態からテーマをXeoryBaseに変更すると、記事一覧に表示件数分のエントリーが一切折りたたまれずにそのまま全文表示される事になります。

仮に3,000文字の記事が10件あったとしたら単純計算で30,000文字、画像が貼ってあれば当然それも全て表示されるので結構大変な事になるというのはおわかりでしょう。

これを正攻法で何とかしようとすると、全てのエントリーにMoreタグを追加するという作業が必要になるわけでして。作業自体は簡単なので数十件程度ならやってやれない事は無いですが、これが数百件あるとさすがに考えものですよね。

手っ取り早いところで表示件数を少なめにするという方法もありますが、やはりそれでは根本的に解決した事にはなりません。

アイキャッチが記事の先頭に挿入される

これは変更前のテーマで同様の機能を利用していた場合は全く問題ありませんが、その機能が無いテーマで投稿の先頭に手動でアイキャッチになる画像を追加していた場合は、その画像とアイキャッチに設定した画像の両方が表示されるので二重になってしまいます。

これも正攻法で何とかしようとすると、全てのエントリーから画像を削除しなければならないので、記事数によってはどうにもキツいと思います。

それでも何とかしたいという方の為に

ぶっちゃけてしまうと他のテーマからXeoryBaseへの変更は正直オススメ出来ません。はじめからこのテーマの特徴を理解してそれに合わせた運用をするべきです。まだエントリーの件数が少ない内ならばあるいは、といったところでしょうか。

それでも自分のサイトでどうしてもXeoryBaseを使いたい!という事であれば方法が全く無いわけでもありません。ただ、かなりムリヤリ感たっぷりな力技で邪道な方法かもしれないので、実際にそれをするかどうかの判断はお任せしたいと思います。

記事一覧に「続きを読む」を挿入しよう

記事一覧の表示に関しては正直何ともならないので、プラグインを利用して「続きを読む」を一括で挿入する事にしたいと思います。

ただし、挿入と言っても実際にエントリー中にMoreタグを書き込んでくれるわけでは無く、あくまでも一覧表示の際に設定された条件を満たす部分まで本文を表示して、その後に「続きを読む」のリンクを設置しているので、最終的に何らかの方法で全てのエントリーにMoreタグを加えない限りプラグインを停止する事は出来ない、という点だけあらかじめご了承下さい。

また、このプラグインを有効化していると自分でMoreタグを挿入した場合に表示がおかしくなる場合があるので、今後もMoreタグを使わない方向で統一する事になりますが、何れにしてもXeoryBaseから他のテーマに変更する可能性も考慮すると、あえてここで苦労してMoreタグを入れる必要は無いかな?とも思います。

デザインはXeoryBaseのデフォルトを利用

基本的にカスタマイズは自由にしていただいて結構ですが、せっかくテーマに合った感じで用意されたものなのでそれを使わない手は無いでしょう。カスタマイズする場合は more-link のクラスセレクタにスタイルを追加する形で良いと思います。

プラグインのインストールと設定

まずは Auto Limit Posts Reloaded というプラグインをサーチして新規追加します。更新が1年前というのが若干気になりますが贅沢は言えません。同様の機能を持ったプラグインは他にもあるかもしれませんが、いくつか試した中ではこのプラグインが一番良さそうな感じがしました。

まずは以下の設定で試してみて下さい。そこで巧くいかなかった場合は設定を変えつつ色々と試行錯誤していただくという事でお願いします。

Auto Limit Posts Reloaded の設定

Limit posts by
Letterに変更
Excerpt size & Reference link
Number of letters
文字数を適当に(70 ~ 120くらい?)
Text continuation
そのままでも何か設定してもOK
Link description
続きを読む、または設定したい文言
Optional Link CSS
空白に
Include also a Share option
チェックを外す

こんな感じですね。

Auto Limit Posts Reloaded 設定

上記以外の項目はデフォルトのままでOKです。設定が終わったら一番下にある Save your settings(画像より下の方になります)をクリックして保存しましょう。

プラグインの編集

デフォルトのままだと少々都合が悪いのでタグを出力している部分にちょっとだけ変更を加えます。設定の Link description の部分にタグを書ける事に気が付いたので、それで何とか出来ないものかと試してみましたが、さすがにそれだけでは巧くいかなかったのでプラグインのソースを編集する事にしました。

プラグインの一覧から Auto Limit Posts Reloaded を編集します。

開いたら id='alpr' で検索しつつ以下の部分を置き換えていきます。プラグインの設定次第で全て必要というわけではありませんが、エントリーの書き方によっては設定を変えつつ試行錯誤してもらう可能性もあるので、該当する部分は全て修正しておく事にします。

検索でヒットした行のこの部分を

<a id='alpr'

こう修正します、全部で9箇所…だったかな?

</p><p><a class='more-link'

何をしたいかと言うと、このプラグインで出力されるタグが

<p>抜粋にあたる導入文<a>続きを読む</a></p>

みたいな感じになっているので

<p>抜粋にあたる導入文</p>
<p><a>続きを読む</a></p>

こうなるようにしています。

あとはaタグにプラグイン独自のidセレクタがついているので、XeoryBaseのMoreタグと同じクラスセレクタに変更する事でデフォルトのスタイルを利用出来るようにしました。

対応後の記事一覧を確認

テーマの変更直後はこんな感じだったのが

XrotyBase 記事一覧 全文表示

続きを読むで折りたたまれてコンパクトになりました。

XrotyBase 記事一覧 続きを読む

実は思わぬ副作用も

カテゴリーの一覧を表示した際に、なぜかカテゴリー名のところにも先頭記事の「続きを読む」が表示されるようになっていたのでこれをCSSで消す事にします。

XrotyBase カテゴリー なぜかここにも続きを読むが

本当に何から何までムリヤリ感満載ですが、無理を承知で道理を通す!的な感じでやってますのでそこは何卒。

.cat-header + p ,
.cat-content .more-link {
	display: none;
}

条件としてはカテゴリーの記事一覧を表示した場合に Auto Limit Posts Reloaded で「続きを読む」を設定したエントリーが先頭だと発生するようです。タグやアーカイブ、検索結果の時にはその状態にはならなかったので一応これで解決出来ているはず…だと思います。

アイキャッチの二重表示を解消しよう

これはCSSで非表示にするという方法で何とかしたいと思います。問題はどちらの画像を消すべきかという事になるでしょうか。

XrotyBase アイキャッチ 二重表示

アイキャッチの方を非表示にする場合

何も考えずにやると記事一覧のサムネイルも表示されなくなってしまうので、ちょっと工夫して投稿側のアイキャッチだけを非表示にしてみました。

.main-inner > article .post-thumbnail {
	display: none;
}

XrotyBase アイキャッチの方を非表示に

そうすると今後もサムネイルの自動挿入機能が生かせないと言いますか、手動で画像を設定しなければいけない事になるので、それとは逆に自分で追加していた方の画像を非表示にする方法も考えてみます。

手動で設定した画像を非表示にする場合

投稿の先頭に「メディアを追加」で画像を設定していた場合にそれを非表示にします。

.main-inner > article .post-thumbnail + p {
	display: none;
}

XrotyBase 手動で設定した方を非表示に

最初はimgだけを非表示にしてましたが、その時に空のpタグが残ったせいでアイキャッチと並んだ本文が一行下がっているように見えたので、imgタグを含んだpタグごと非表示にしてみました。尚、TinyMCEの自動整形をオフにしてたりするとこのpタグが無い場合もあるのでそこは巧く調整して下さい。

と思ったらまた新たな問題が…この方法だと先頭に画像が無い場合、本文の最初の段落がまるっと消えてしまいますねぇ。

必ず投稿の先頭には画像を設定するというルールを徹底すれば先ほどのCSSで良いですが、画像が無い場合に先頭のpタグが消えるのは避けたいという事であればこちらを使用した方が良さそうです。

.main-inner > article .post-thumbnail + p img {
	display: none;
}

ただし横に並んだアイキャッチ画像と比べて一行分高さが…

XrotyBase 手動で設定した方を非表示に 1行下がるバージョン

親テーマからファイルをコピーしてきてタグを出力している部分を~みたいな大げさな修正はしたくないので、この程度の事ならと潔く諦めてもらうかTinyMCEの自動整形を何とかするしか無いように思います。

記事をほぼ書き終えたところで思いつきましたが、投稿の先頭に空のpタグを入れておく事で一応は回避出来ます…自分で書いててうんざりするほどしょっぱい方法ですけどね?

何れにしても先頭の画像は必須になりそう、と言うかどこかでアイキャッチ画像は自動か手動かを決めて、それに統一した方が良いのは間違い無さそうです。

それにしてもTinyMCEの自動整形は本当に厄介ですが、かと言って無効化するとそれはそれでかえって面倒な事になるのが困りものです。

それ以外に気付いた事をいくつか

とりあえず見た目上だけは何とかそれっぽく 誤魔化せた 出来たのでは無いかと思いますが、基本的なXeoryBaseの使い方は「投稿ごとに適切な設定をする」事にあるので、本来の機能としては生かせていない部分がまだいくつかあります。

メタタグの設定に関して

XeoryBaseではメタタグのディスクリプションやキーワードを、全て投稿ごとに手動で設定する仕様になっているので自動的には何も設定されません。

仮にその辺りはプラグインを利用してディスクリプションは抜粋から、キーワードはカテゴリーやタグから設定するようにしても、XeoryBaseの方で空のメタタグを出力しているのでメタタグが重複するのは良くないという事ならテーマファイルを編集しなければなりません。

CTAの設定に関して

個人サイトではなかなか使い所の難しいCTAですが、このXeoryBaseのウリでもある機能だと思います。そのCTAもメタタグと同様で投稿ごとに登録されたCTAの中から選択するか、その投稿専用に作成するかなどを設定する必要があります。

しかし全ての投稿に対して基本的にはコレを表示して、個別に指定がある場合はソレを表示するといった使い分けが出来ません。過去のエントリーに対しては投稿をひとつづつ開いて個別に対応するしか方法が無いわけです。

良くも悪くもこれがXeoryBaseの特徴かと

多機能でいたれりつくせりなテーマが多い昨今では、そういった面だけを取り上げるとXeoryBaseってなにげに不便だな…と思ってしまうかもしれませんが、それだけ記事をひとつづつ丁寧に書くようにというメッセージと受け取れなくもありません。

最近「ブログはとにかく数を書け」みたいな内容の記事を見かける事が多く、記事を書くのがこの上無く遅い私としては正直げんなりしていましたが、その言葉の上っ面だけを真に受けて密度の薄い記事を粗製乱造するより、多少時間がかかっても常にその時点で全力の記事を書いていきたいなと、そんな事を思った次第です。

結論としては、XeoryBaseを利用するなら記事を一つづつ見直してその内容に合った設定をするのがベストな運用になりますが、とりあえずここで紹介した荒業とも言える方法でXeoryBaseをしばらく利用してみて、それからどうするかを決めても良いのではないでしょうか。

修正内容を元に戻すにはプラグインを停止して追加したCSSを削除するだけですので、ぜひ一度試してみていただけると幸いです。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアする

フォローする

トップへ戻る