WordPress 表の罫線強制表示

WordPress 表の罫線強制表示

表の罫線はテーマ依存か?

WordPress で表を作るとき、テーマに依存するんだと思うんですが、
罫線が表示されたり表示されなかったりします。

少なくとも、Markdown で入力すると、表の罫線の設定はできません(たぶん)

「こうなっちゃうんですよ(設定前)」例:
設定前

この表示の方がしっくりするという人や場合も多いとは思うんですが、
個人的には、どうも落ち着かないです。


テーマ Sparkling で罫線を強制表示するには

コンテンツを表示して、Chromeのデベロッパーツールで、確認したところ tableタグは、

<table class=" table table-hover">

だったので、
table.table.table-hover の th と td に罫線を設定すれば、強制表示できます(たぶん)。

副作用が、出ないともかぎりませんが・・・まぁそんときはそんとき


footer.php の書き換え

テーマのファイルを書き換えるのは最小限にとどめたいですが、
別の対策(このリンクが別ウィンドウで開くようにする対策)で、
既に footer.php を書き換えていたので、同じ場所に入れちゃいました。

wp-content/themes/sparkling/footer.php の最後に近いあたりに、

<script type="text/javascript">
jQuery(function() {
    jQuery("table.table.table-hover th, table.table.table-hover td").css('border','1px solid #cccccc');
});
</script>

を入れると、強制表示できます。


そういうわけで、このサイトの footer.php は、現在

<script type="text/javascript">
jQuery(function() {
    var atags = $("a[href$='#_blank']");
    for(const atag of atags) {
        jQuery(atag).attr('target', '_blank');
        str = jQuery(atag).attr('href').slice(0, -7);
        jQuery(atag).attr('href', str);
    }
    jQuery("table.table-hover th, table.table-hover td").css('border','1px solid #cccccc');
});
</script>

を追加してあります。

で、この対応により
「こうなります(設定後)」例:
設定後
のようになります。

Markdown のリンクを別ウィンドウ表示にするかを制御

Markdown のリンクを別ウィンドウ表示にするかを制御

Markdown のリンクの問題点

WordPress の Jetpack で、Markdown で入力でき、
編集の時も入力した Markdown がそのまま入ってるんで、とても便利です。

が、ちょっと残念なのは、リンクに、target=’_blank’ がつけられないこと

Jetpack の Markdown は、Markdown Extra に対応していると書いてあるけど、
{.class名}って書けば、class が付けられるってのは対応していないみたいです。

リンクURIが #_blank で終わってたら別ウィンドウ

で、ググってみたら、JavaScript で、外部サイトだったら target=’_blank’ を付けるという、
目からウロコの方法が紹介されていたので、それを少し変えさせていただき、
リンク先が、#_blank で終わっていたら、で実装してみました。

表示する文字列:ロリポップXXリンク、リンク先:https://lolipop.jp/ であれば

[ロリポップ通常リンク](https://lolipop.jp/)  
[ロリポップ別窓リンク](https://lolipop.jp/#_blank) 

です。

ロリポップ通常リンク
ロリポップ別窓リンク

まぁ、URIの最後に、7文字余計なのを入れることになっちゃいますが・・・

footer.php の書き換え

wp-content/themes/使用するテーマ/footer.php
の最後に近い </body> の上あたりに、

<script type="text/javascript">
jQuery(function() {
    var atags = jQuery("a[href$='#_blank']");
    for(const atag of atags) {
        jQuery(atag).attr('target', '_blank');
        str = jQuery(atag).attr('href').slice(0, -7);
        jQuery(atag).attr('href', str);
    }
});
</script>

を入れてみました。

説明

説明するほどの内容じゃないですが、
a タグの href が #_blank で終わってたら、

  • その a タグに target=’_blank’ を入れる
  • href の最後の7文字(余計につけておいた #_blank )を消す

というものです。

参考

Markdownのリンクを別ページで開けるようにする