タイトルのリスト表示を作る

最近、LinuxのCommandについて簡単にまとめ始めました。ブログの記事としてコマンドの説明を書いているのですがアイキャッチ画像が有る訳では無いので一覧を出すと

こんな感じになって、なんとも情けない感じです。元々アイキャッチ画像は無いのだから、タイトルと本文の書き出しで一行となったリストになればかなり見やすくなると思われます。そこで、今回はその様な関数を作りたいと思います。

先ずはショートコードの確認

例えば文書に段落で、”これはテスト”と入力したとします。これをHTML形式編集を選ぶと画面がこの様に代わります。

編集画面に<p>これはテスト</p>とHTMLコードを入力するれば、”これはテスト”　と表示されるという事です。よって、PHPで、”<p>これはテスト</p>” という文字列を返す関数を作成し、それをソートコードで呼び出せば画面に、”これはテスト”　と表示されるはずえす。先ずはそれを確認しましょう。

今回のテーマは、”simplicity2”。先ずは小テーマの、”Function.php”を編集します。WPで、

  • 外観ー＞テーマエディターをクリック
  • 右上の編集するテーマを選択でSimplicity2 childを選択
  • その下のテーマのための関数で、function.phpを選ぶ
  • 出てきた画面に下記の青色のコードを追加

コードの部分は、

<?php 
function Title_List() {
    return '<p>これはテスト</p>';
}
add_shortcode('T_list', 'Title_list'); 
?>
  • ２行目：関数名を、”Title_List”としました。
  • ３行目：文字列、”<p>これはテスト</p>”　を返すだけです。
  • ４行目：add_shortcode関数を使って、ショートコードでの呼び出し名を、”T_list”　と設定。

今回のリスト表示の機能は最終的にTopのメニューに追加するので、この関数を固定ページに定義したいと思います。WPで固定ページを新規追加して、

  • タイトルを、”タイトルリスト”と入力して下さい。
  • 本文には、ショートコードのみ書き込みます。
  • 左側のメニューからショートコードを選択。
  • ショートコードに、”
    cd作業中のディレクトリを移動。
    chgrp
    chmodファイルやディレクトリのパーミッションを変更する。
    chown
    cpファイルやディレクトリのコピー
    dmesgLinuxカーネルが起動時に出力したメッセージを表示するコマンド。
    ls
    mkdir
    pstreeプロセスの親子関係を分かりやすく表示する。
    pwd現在の作業ディレクトリを表示
    systemctlsystemdを管理するためのコマンド。
    tar
    umask
    “　と入力して、下書き保存。

その状態でプレビューを見れば、”これはテスト”　がちゃんと表示されます。

本題に入ります

各Linux　Command説明の投稿は一つのカテゴリーにまとめています。PHPの関数、”get_posts( )”　は、条件にマッチする投稿情報を取得る関数で、今回はこれを使って投稿を検索します。検索条件は、

  • Linux　Command説明の投稿が属しているカテゴリ−を指定。→　category=カテゴリID
  • タイトルを検索。　→　orderby=post_title
  • ソートは昇順。→　order=ASC
  • 投稿さている全て　→　numberposts=-1　（-1は全て）

です。カテゴリIDは、以下で探します。

  • 投稿→カテゴリ−で対象のカテゴリーを探す。今回は、”command_list”
  • 対象のカテゴリの上にマウスを置くと、画面の下にそのURLが表示されます。
  • URLの、”category&tag_ID=xx”　の　”xx”がID。今回は８７

検索条件を”＆”でつないで、category=87&orderby=post_title&order=ASC&numberposts=0　が get_posts(）関数の引数になります。get_posts(‘category=87&orderby=post_title&order=ASC&numberposts=0’）これを元にコードを書くとこんな感じになります。

<?php 
function Title_List() {
	global $post;
	
	$myposts = get_posts('category=87&orderby=post_title&order=ASC&numberposts=-1');
	$post=$myposts[0];
	
  $retHtml = '<p>最初の投稿の<br>タイトルは：' . $post->post_title 
			. '<br>リンク先は：' . $post->guid 
			. '<br>抜粋は：' . $post->post_excerpt  . '</p>'; 
	
	return $retHtml;
}
add_shortcode('T_list', 'Title_list'); 
?>
  • ３行目：　global $post;
    • グローバル変数$postを使うので、ここで宣言。
  • ５行目：　$myposts = get_posts(‘category=87&orderby=post_title&order=ASC&numberposts=-1’);
    • ”get_posts( )”　の戻り値は条件に合ったグローバル変数 $post のArray（配列）。
    • それを、$myposts　で受ける。
  • ６行目：　$post=$myposts[0];
    • 返り値の最初の１番目をグローバル変数$postに代入。
    • これでその投稿にアクセス出来ます。
  • ８−１０行
    • 今回取得するデータとその取得方法は、
      • タイトル：　$post->post_title
      • 投稿のURL: $post->guid　
      • 投稿抜粋：　$post->post_excerpt
    • これらの値を使って
      　　最初の投稿の
      　　　タイトルは： $post->post_title
      　　　リンク先は： $post->guid
      　　　抜粋は： 　　$post->post_excerpt
      と表示する様にHTMLの文字列を作成しています。
  • １２行目：　return $retHtml;
    • 製作して文字列を返す。

これを保存して固定ページ、”タイトルリスト”　のプレビューで動作を確認して見ましょう。

タイトル、抜粋はそのとおりなのですがリンク先が違いました。実際のURLと比較すると、
　　今回：https://hatakekara.com/?p=3026
　　実際：https://hatakekara.com/linux-command-cd/
最後の部分が違います。試しに今回のURLをブラウザに入れると、”ｃｄ”の画面が表示されました。どうも２つは同じURLを示している様です。ともあれこれで必要はデータにアクセス出来る事が確認出来ました。

目標のリスト表示はこんな感じ

　　

HTMLで表そうとすると、

		<table style="width: 100%; border-collapse: collapse; border-color: #000000;" border="1"><tbody>

		    <tr><td style="width: 15%"><a href=リンク先>タイトル</a></td> 
		    <td style="width:85%">抜粋</td></tr> 
		
		    <tr><td style="width: 30%"><a href=リンク先>タイトル</a></td> 
		    <td style="width:70%">抜粋</td></tr> 

	        ............................................
            ............................................
    	
	</tbody></table>
  • １行目：　　テーブルの定義
  • ３行目：　　リンクを持ったタイトルが表示される箇所。セルの幅を15％と規定
  • ４行目：　　抜粋が表示される箇所。セル幅85％
  • それ以降：　3,4行と同じ作業を投稿の数だけ繰り返す。
  • １２行目：　テーブを閉じる。

これらを元にPHP関数は、以下の様になりました。HTMLを変数　＄retHtml　に設定しています。

<?php 
function Title_List() {
	global $post;
	
	$oldpost = $post;
	
	$myposts = get_posts('category=87&orderby=post_title&order=ASC&numberposts=-1');
	
	if($myposts) {
		// 記事がある場合 取得した記事の個数分繰り返す
		$retHtml = '<table style="width: 100%; border-collapse: collapse; border-color: #000000;" border="1"><tbody>';

		foreach($myposts as $post) :
			// タイトル設定(リンクも設定する)
		    $retHtml.= '<tr><td style="width:15%;"><a href="' . $post->guid . '">' . $post->post_title . '</a></td>'; 
		    $retHtml.= '<td style="width:85%;">' . $post->post_excerpt . '</td></tr>'; 
		endforeach;
		
		$retHtml.=  '</tbody></table>';
		
	} else {
		// 記事がない場合↓
		$retHtml='<p>記事がありません。</p>';
	}
	
	// oldpost変数をpost変数に戻す
	$post = $oldpost;

	return $retHtml;
}
add_shortcode('T_list', 'Title_list'); 
?>
  • ５行目：　　　グローバル変数$postをバックアップ
  • ７行目：　　　条件に合った投稿のPostを検索
  • ９から１９行：検索条件に合う投稿が合った場合
    • １１行目：　　　　　テーブルのトップを設定
    • １３から１７行目：　テーブルの項目を設定。該当項目が無くなるまで繰り返す。
    • １９行目：　　　　　テーブルを閉じる。
  • ２１行目：　　該当する投稿が無い場合、”<p>記事がありません。</p>”　を返す。
  • ２７行目：　　グローバル変数$postの値を元に戻す。
  • ２９行目：　　＄retHtml　を戻す。

これを保存して固定ページ、”タイトルリスト”　のプレビューで動作を確認して見ましょう。予定通りに表示されます。

固定ページをトップのメニューに追加

固定ページ、”タイトルリスト”　を公開して、Wpで、外観→メニューと進み、”タイトルリスト”をメニューのトップに追加しました。このボタンを押すとリストが表示されます。

< Top>