戻るリンク―サイト改造追加その③

脚注表示の試行錯誤のどさくさで、またまたサイトのプチ改造です。

そう、このテーマにはデフォルトでHOMEに戻るボタンのようなものは存在しない。よって固定ページの場合、コンテンツ末尾に自分で作らなければならなかった。

でも、これをやってしまうと今回のように脚注プラグインを表示させた場合、「HOMEに戻る」が脚注の上に表示されてしまう! ウギャーッ!!! み、見苦しいページのできあがりである。こんなのいやだ~!

そんなわけで、またまたまたまた改造である。ド素人の私にはphpのタグや関数を書き込むのはけっこう大変。調べるのも大変だし、それをどのように、どこに書いていけばいいのか分からない。

とりあえずHOME以外の固定ページで使っているテンプレートファイルにHOMEへ戻るためのリンクを作成する。また、小説を掲載するページには目次へ戻るリンクを設置する。のちのちCSSでセンタリングすることを考慮して、div class=backとclass指定もしておく(”などは省略)。

目次は基本的に個々の小説掲載ページにとって親ページになるはずなので、echo get_page_link($post->post_parent)を使ってURLを取得する。それと同時にecho get_the_title($post->post_parent);で親ページのタイトルを取得する・・・らしい。うまくいくのかどうかはとにかく書き込んでみるしかない。

<a href=”<?php echo get_page_link($post->post_parent); ?>”><?php echo get_the_title($post->post_parent); ?></a></br>
<a href=”<?php echo home_url(‘/’); ?>”>HOME</a>

うっそ~ん♪ 奇跡的に一発で「目次」と「HOME」が表示された!

問題は両方とも黒字で左寄せで表示されていること。さっそくCSSでセンタリングして色はリンク用の色に変更しなくては。で、

.back a {text-align: center;  color: #0000cc; }

と指定してみたものの・・・色は変わるのにセンタリングはしてくれない。むむむむ・・・と考えること数分。そもそものスペースとか余白とかを指定しないと、どんなサイズに対してセンタリングすればいいのかWordpressさまも分からんじゃろと思い至り、以下のように指定。

.back { padding: 10px; padding: 0.625rem; margin-bottom: 20px; margin-bottom: 1.25rem; text-align: center; }

.back a { color: #0000cc; }

これで無事解決!!! ちなみにこのサイズは投稿ページの前後の記事へのリンク部分に指定されているCSS部分からの拝借です。

ずいぶんCSSとかphpに対して勘が働くようになってきたわ。

了子