WordPress│テーブル内の数字を計算して合計を表示する方法

2022.09.292024.03.05

WordPress内のテーブルの中の数字を計算したいことはないでしょうか？

実はちょっとしたJavascriptを書けば簡単に表示できます。

SWELLと書いてますが、どのテーマでも可能なカスタマイズです。

下記のサンプルのテーブルは項目2の値の合計値を計算して出力しています。

1+2+3+4+5＝15

項目1	項目2
A	1
B	2
C	3
D	4
E	5
合計	0

テーブル内の行数を表示する方法

まずは簡単なJavascriptが動いて表示できるか試しましょう。

テーブルの作成

テーブルのブロックを作成

HTML アンカーにsampleと書きましょう。

テキストの作成

テーブルの行数を表示するテキストも作ります。

「テーブルの行数は0です。」と記載したら、右クリックからHTMLの編集を選びます。

下記のコードのように<span id="sum">0</span>を挿入しましょう。

<p>テーブルの行数は<strong><span id="sum">0</span></strong>です。</p>

最後に再び右クリックをしてビジュアル編集に戻しておきます。

JSの挿入

記事編集画面下のJS用コードに下記のコードを記載します。

※SWELLじゃないテーマの場合は別途、functions.phpなどにコードを挿入しましょう。

var rows = document.getElementById('sample').getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
document.getElementById('sum').innerText = rows;

SWELL以外のテーマの場合

functions.phpまたはCode Snippetsに以下のように記述します。

if ( is_single(array('0', '152')) ) {は読み込みたい記事ID

add_action( 'wp_head', function () { ?>
if ( is_single(array('0', '152')) ) {	
	<script>
		window.onload = function () {	
		var rows = document.getElementById('sample').getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
		document.getElementById('sum').innerText = rows;
		}
	</script>
}
<?php } );

以上です。

テーブルの行数の表示サンプル

プレビューしてみると下記のような結果になります。

項目1	項目2
A	a
B	b
C	c
D	d

テーブルの行数は0です。

今回はテキストで行数を表示しましたが、HTMLの編集でidを挿入できるなら、どこにでも表示可能です。

検証は以上です。

SWELLテーブル内の数字を合計して表示する方法

次に本題です！次にテーブル内の数字を合計してみましょう。

やり方は先ほどと同じ流れになります。

テーブルの作成

テーブルを作成します。

またテーブル作成後、選択したま高度な設定のHTML アンカーにsample2と入力しました。

そして今回はテーブルの最終行に合計値を表示させようと思います。

テーブルを右クリック、HTMLとして編集を押して下記のコードを挿入します。

<span id="sum2">0</span>

今回はsum2というIDにしました。

JSの挿入

あとは記事下にJSのコードをいれるだけです。

var rows = document.getElementById('sample2').getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].rows;
var num = 0;
for (i = 0, len = rows.length; i < len; i++) {
   num += parseInt(rows[i].cells[1].innerText);
}
document.getElementById('sum2').innerText = num;

SWELL以外のテーマの場合

functions.phpまたはCode Snippetsに以下のように記述します。

if ( is_single(array('0', '152')) ) {は読み込みたい記事ID

add_action( 'wp_head', function () { ?>
if ( is_single(array('0', '152')) ) {	
	<script>
		window.onload = function () {	
			var rows = document.getElementById('sample2').getElementsByTagName("table")[0].getElementsByTagName("tbody")[0].rows;
			var num = 0;
			for (i = 0, len = rows.length; i < len; i++) {
				num += parseInt(rows[i].cells[1].innerText);
			}
			document.getElementById('sum2').innerText = num;
		}
	</script>
}
<?php } );