tableタグを使用した時に複数の改行(br)が入る対処法

カラーミーショップのテンプレートカスタマイズのメモ、続けて投稿になります。

商品ページの投稿箇所2箇所に分割できたのは良いのですが、
現在運用しているページは【自動で改行する】設定です。
この場合、tableタグを挿入すると、上部にぽっかりと空間が広がってました。
ソースをみると、

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<table>~~~~~~~~~~

と、挿入した覚えのない改行タグが列挙されていますorz…
この現象は、カラーミーショップの他、たまにWordPressでも出現します。
※WordPressは自分のサイトでは大丈夫そうです✊

今回設定すること

すでに運用し始めているサイトでのあとからの設定追加は結構面倒なことが多いです。
デバッグに時間がかかります。

なので、今回は回避策として【brタグを非表示設定にする】classを追加して、
tableタグごと括ることにしました(最適解かどうかは検証中です)

CSS設定

div.deleteBr br {
    display: none;
}

HTML設定

<div class="deleteBr">
    <table>
        <tr>
            <td>test</td>
            <td>test</td>
        </tr>
    </table>
</div>

divタグ内のbrを非表示にするので改行されずに表示されます。
とりあえずこの設定で、カラーミーショップの改修作業を進めたい!と思っています。



【カラーミーショップ】テンプレートカスタマイズ:商品説明欄を2箇所に分割

カラーミーショップの商品説明欄は、HTMLタグも利用できますが、
「できれば分割して説明文をかけたらいいなー」と思うことがあります。

例えば「サイズと購入ボタンの下にサイズ表を挿入」「商品説明は通常のエリアに表示」など。

色々調べて、こちらのページを見つけたので、同じようにやってみました。

商品説明欄に登録した文字列は、独自タグ<{$product.explain}>で呼び出しています。
テンプレート(商品詳細ページ)内の独自タグを記述した場所に表示されます。

今回は、カラーミーショップの「ショップ作成>デザイン>利用中のテンプレート>テンプレート編集」から「商品詳細」のテンプレートをカスタマイズします。

JavaScript(テンプレート内に記述追加)

$(function(){
  var str = '<{$product.explain|regex_replace:'/[\r\t\n]/':''}>';//改行0x0aをSmartyで除去
  var x = str.indexOf('<!--');
  var y = str.indexOf('-->');
  if(x >= 0 && y >= 0) {
    $('#spec').html(str.substring(x+4,y));
  }
});

HTML(テンプレート内の表示させたい箇所に追加)

<div id="spec"></div>

商品説明文の編集作業

商品説明の部分では、通常の書き方の部分は「通常エリア」、<!– –>(コメントアウト)で書かれている部分が、<div id=”spec”></div>を追加したエリアに表示させることができます。

カラーミーショップは改行の自動挿入はON/OFF設定可能

カラーミーショップはショップの基本設定で商品ページの改行についてはON/OFFが可能です。HTMLタグに自動的に改行が入ってしまうのでできれば「OFF」にしたいところですが、クライアント案件によっては「説明文を自動改行ありですでに書いている」場合があります。
今回の設定では表示させたい部分の<br>は削除していますが、
tableタグの前に自動挿入される<br>タグは消せません。
その場合の設定は別設定を施すことにします。



夏季休業のおしらせ

平素は格別のご愛顧を賜り、厚くお礼申し上げます。
誠に勝手ながら、以下の期間を夏季休業とさせていただきます。
ご不便をお掛け致しますが、何卒ご理解のほどお願い申し上げます。

■夏季休業期間:
2023年8月10日(木) ~ 8月19日(日)
※2023年8月21日(月)より、通常通り営業いたします。

夏季休業期間中に頂きましたお問い合わせにつきましては、2023年8月21日(月)以降、順次対応させていただきます。



新年のご挨拶

新年、明けましておめでとうございます。

旧年中は格別のお引き立てを賜り、厚く御礼申し上げます。
2023年もGORI Styleでは、更なるサービスの向上に努めて参ります。
これからもより一層のご支援、お引立てを賜りますようお願い申し上げます。

本年も宜しくお願い申し上げます。



夏季休業のおしらせ

平素は格別のご愛顧を賜り、厚くお礼申し上げます。
誠に勝手ながら、以下の期間を夏季休業とさせていただきます。
ご不便をお掛け致しますが、何卒ご理解のほどお願い申し上げます。

■夏季休業期間:
2022年8月6日(土) ~ 8月16日(火)
※2022年8月17日(水)より、通常通り営業いたします。

夏季休業期間中に頂きましたお問い合わせにつきましては、2022年8月17日(水)以降、順次対応させていただきます。



HTMLの共通部分をjqueryで読み込む

クライアントワークは、CMS案件がメインになりつつあるGORI Styleです。
ただ、まだHTMLで組む場合もあります。

ボリュームとして十数ページだとしても、
やっぱりグローバルメニューやフッターなど、共通パーツはまとめて作業したい!
と思って、今回は共通パーツをインクルードすることにしました。

複数ページで共通になる部分をインクルードするときにjqueryでコンテンツを読み込む場合

jqueryはクライアント側でHTMLの共通部分を読み込むことができます。
そのためHTMLの共通部分をPHPでインクルードするときのようにWebサーバーの環境を確認する必要はありません。
jqueryですのでjquery本体をheadで読み込んでおくことをお忘れなくです。

HTMLの複数ページで共通部分をjqueryで読み込む場合の具体的なやり方。

<header id="header"></header>
    <div class="wrapper">
        <div id="main">複数ページごとのメインコンテンツ</div>
        <div id="side"></div>
    </div>
    <footer id="footer"></footer>

//共通パーツ読み込み
$(function () {
$("#header").load("header.html");
$("#side").load("side.html");
$("#footer").load("footer.html");
});

複数ページごとのメインコンテンツ

  1. まずHTMLの複数ページで共通化して表示したい要素にid属性を記述してid属性値にid名を指定します。たとえばサイトで共通のヘッダーコンテンツを表示したい場合では、header要素の開始タグにid=”header”のように指定します。
  2. 次にscript要素を</body>直上に記述します。script要素内ではfunctionで実行する処理を、共通部分を読み込む要素に指定したidと紐付けます。
  3. 最後にjqueryのloadに、共通部分に使うために作成してサーバーにアップしたHTMLファイルのパスを指定します。

という感じで、少し効率化を図ることができそうです♪



新年のご挨拶

新年、明けましておめでとうございます。

旧年中は格別のお引き立てを賜り、厚く御礼申し上げます。
2022年もGORI Styleでは、更なるサービスの向上に努めて参ります。
これからもより一層のご支援、お引立てを賜りますようお願い申し上げます。

本年も宜しくお願い申し上げます。



夏季休業のお知らせ

GORI Style will be closed for the following dates during the summer holidays.

■夏季休業期間
2021年8月10日(火) ~8月17日(火)

休業期間中にいただいたお問合せについては、営業開始日以降に順次回答させていただきます。
皆様には大変ご不便をおかけいたしますが、何卒ご理解の程お願い申し上げます。



夏季休業のお知らせ

平素は格別のお引き立てをいただき厚くお礼申し上げます。
GORI Styleでは、誠に勝手ながら下記日程を夏季休業とさせていただきます。

■夏季休業期間
2021年8月10日(火) ~8月17日(火)

休業期間中にいただいたお問合せについては、営業開始日以降に順次回答させていただきます。
皆様には大変ご不便をおかけいたしますが、何卒ご理解の程お願い申し上げます。



投稿・固定ページに最終更新日を表示させたいときに

WordPressへの投稿の管理で、たまに「あったらいいなぁ~」と思うのが
ページ編集の最終更新日の表示です。

ディフォルト設定だと「ページ公開日」が表示されますが、
同ページを再編集した時など、できれば【最終更新日】も知りたいところ。
特に数年経過したページの再編集が必要な場合、時系列の確認もできたらうれしいですね。

便利なプラグインを利用することも可能ですが、
なるべくプラグインを利用しない方法として、function.phpに記述することも可能です。

functions.phpに記述するコード

/* 投稿一覧と固定ページ一覧に最終更新日の列を追加 */
function add_posts_columns_last_modified( $columns ) {
    $columns[ 'modified-last' ] = '最終更新日' ;
  echo '';
    return $columns ;
}
add_filter( 'manage_posts_columns', 'add_posts_columns_last_modified' ) ;
add_filter( 'manage_pages_columns', 'add_posts_columns_last_modified' ) ;

/* 最終更新日を表示 */
function custom_posts_columns_last_modified( $column_name, $post_id ){
 
    if( 'modified-last' != $column_name ){
        return ;
    }
 
    $modified_date   = the_modified_date( 'Y年Md日 Ag:i' ) ;
    $modified_author = get_the_modified_author() ;
 
    echo $modified_date ;
}
add_action( 'manage_posts_custom_column', 'custom_posts_columns_last_modified', 10, 2 ) ;
add_action( 'manage_pages_custom_column', 'custom_posts_columns_last_modified', 10, 2 );

/* ソートできるようにする */
function sort_columns_last_modified( $columns ){
    $columns['modified-last'] = 'modified' ;
    return $columns ;
}
add_filter( 'manage_edit-post_sortable_columns', 'sort_columns_last_modified' ) ;
add_filter( 'manage_edit-page_sortable_columns', 'sort_columns_last_modified' ) ;


コードを記述したら【ファイルを更新】すればOKです😊

今回は、クライアント案件のためにチェックしました。

今回は ちりつもプレス 様のページを参考にさせていただきましたm(__)m



GW期間中の休業について

平素はご愛顧を頂きまして、誠にありがとうございます。
誠に勝手ながら、下記の日程をゴールデンウィーク休業とさせていただきます。
皆様には大変ご迷惑をおかけいたしますが、ご了承いただきますようお願い申し上げます。

2021年4月29日(木)~2021年5月9日(日)

尚、5月10日(月)より通常営業いたします。



Bootstrap4でcssで親要素を無視してブラウザ幅100%で表示させる方法

Bootstrapを利用してWordPressの新規テーマ作成をあれこれ検討中。
Bootstrapで使用されるcontainer、container-fluidの設定がブラウザ画面の横幅100%ではないけれど、一部分だけ100%にしたいとき。

色々試してみて、『親要素の幅を無視して子要素を100%にする』専用のclassを用意することにしました。

 .full-width {
     width:100vw; 
     position: relative;
     left: 50%;
     right: 50%;
     margin-left: -50vw;
     margin-right: -50vw;
 }
 .full-width img{
     max-width:100vw;
     width:100vw;
 }

新しいclassに「 width:100vw; 」を指定しました。
これが、100%の代わりになるコードですね。
vwは単位の一つで、略さなければ viewport width となります。
ちなみに高さの場合は height:100vh; となって、
こちらは viewport height です。
wとhなので覚えておくとよいかと。

WordPress5系になってから、「グーテンベルグ」を当初は敬遠していましたが、基本設定に設定できるものも多いし、パターンを登録できるのが地味に有難かったりします。

今回の「full-width」のclass設定は、
カバーのブロックのプロパティで「高度な設定」>「追加SCCクラス」の欄に「full-width」を追加してページ公開すると、反映します😊