タグ: ＣＭＳ（WordPress）

WordPressはシステム本体のPHPプログラムと投稿記事を保存しているデータベースから構成されている

１．ファイルとディレクトリ

２．データベース

　データベースの中身を「phpMyAdmin」を使って表示する
　　　接頭語（wp_）が付いた１１個のテーブルで構成されている
　　　　　※接頭語（wp_）はインストール時に任意に変更できます

WordPressでタグを取得・出力する方法
　　　（１）タグを全件取り出し、順次出力する

$tags = get_the_tags();
 if ($tags)
   {
     foreach($tags as $tag)
       {
	  　　　echo '<li>' . $tag->name . '</li>';
       }
   }

　　　（２）タグを全件取り出し、リンク先を付加して順次出力する
　　　　　　　HTML本体の中にPHPで処理を組み込む

<html>
<?php
    $posttags = get_the_tags();
    if ($posttags)
      {　foreach($posttags as $tag)
          { 　　?>
　　　　　<a href="<?php echo get_tag_link($tag->term_id) ?>" target="_blank">
<?php
 　　　　　echo $tag->name 　?>
　　　　　</a>　　
<?php
             }
          }　　　?>
</html>

　＜補足＞
　　　WordPressのタグは以下の順番で表示される
　　　　　数字
　　　　　アルファベット
　　　　　ひらがな
　　　　　カタカナ
　　　　　漢字

　　　＜主＞と＜従＞の関係であるタグ構成の場合
　　　　　出力順を保証するためにタグ名の先頭に①と②を付与する
　　　　　①が主タグ、②が従タグとして順に表記される

　　　　　プラグインやプログラミングを取り入れれば並びは替えられるが
　　　　　手っ取り早い方法で並び順を保証する、方法です

チートシート（覚書き）を利用するに当たって

　チートシートを自分で作成すればWＰへの理解が深まる訳だが、先達が作成したモノを利用させて貰うことをお勧めします。

　幾つかある中で２つだけ紹介します
　　　他にもチートシート集がありますので探してください。

１．日本語版 WordPress チートシート

　コーディング事例が載っていて、見やすくなっています

　　　https://www.webcreatorbox.com/tech/japanese-wordpress-cheat-sheet

２．【コピペで使える】日本語版WordPressチートシート

　基本的なタグが載っていて、コピーして直ぐ使えます

　　　https://more-field.co.jp/web/wordpress-cheatsheet/

３．補足

　「百聞は一見に如かず」、一度上記のサイトにアクセス願います
　　　よくまとまっていますので直ぐに使い方が分かります。

「親テーマ」を修正する

　「親テーマ」が更新されると、カスタマイズを見直す必要が発生します

１．「抜粋」の表示をカスタマイズする

「子テーマ」を修正する

１．ヘッダーの文字サイズを小さくする

　タイトル文字の「h1.entry-title」の文字サイズ「font-size: var(–global–font-size-page-title);」を修正してタイトルを小さく表示させる。

　現状はＣＳＳ変数として「4rem」が指定されているので、ＣＳＳを修正して文字の大きさを「2.5rem」とする。

　ＣＳＳの修正に際しては、要素名が直ぐには分からないのでブラウザーを使って「開発者ツール」または「デベロッパーツール」を呼び出し要素名を探し出す。ＷＰの投稿記事をブラウザーで表示した状態で「ＰＦ１２」キーを押下すれば直ぐにツールが起動します。カーソル等を移動させながら丹念に目的とする要素名を探し出します。
　要素名が分かれば、後は規則に則って修正用のＣＳＳを用意します。

　ＷＰは複雑にスタイルシートが定義されており、それぞれ適用させる優先順位があって中々直ぐには目的とする結果が得られない場合があります。やむを得ず「!important」パラメータを使って結果を求めることも必要です。

@charset "UTF-8";

/*
 Theme Name:   Twenty Twentyone Child
 Template:     twentytwentyone
 
 Theme URI:    ●●●省略●●●
 Description:  Twenty Twentyone Child Theme
 Author:       河内・水簾洞
 Author URI:   https://ksrd.jp/suirendou/
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-twentyone-child
*/
	
.singular .entry-title {
	font-size: 2.5rem !important;
}

　「親テーマ」を変更しても「子テーマ」の修正内容は影響を受けません。スタイルシートに記述されているテーマ名は覚書程度に理解してください。
　ただし「親テーマ」が使用している要素名を変えると「子テーマ」の修正内容は反映されなくなります。テーマを変更する際には事前にテスト環境での確認をお願いします。

子テーマの作成方法について
　　（WordPress Codexより）

１．子テーマの設置場所を用意する

　ＷＰサーバーの「テーマ」が既に設置されている場所に「子テーマ」ディレクトリを「親テーマ」ディレクトリと同列の場所に追加する。

　ＦＴＰソフト等を利用して、ＷＰの「親テーマ」が設置されている場所を探し当てる。通常「wordpress」ディレクトリの下位に「wp-content/themes/」があり既に組み込まれている「twentytwenty」等のディレクトリが存在するのが分かる。この場所が特定出来たら、同列に「子テーマ」用のディレクトリを作成する。

　「子テーマ」設置ディレクトリの名前には「親テーマ名-child」として「親テーマ」を明示しておきます。

２．スタイルシート(style.css)を用意する

　テキストエディターで以下の 「スタイルシートヘッダ 」で始まる「style.css」ファイルを作成して、「子テーマ」用に設置したディレクトリの配下に保存します。
　下記「スタイルシートヘッダ」ＣＳＳで、親子の関係を表すのは「Theme Name:」と「Template:」の２箇所だけなので見本通りに半角で記述します。他の箇所は「子テーマの有効化」時に確認用にこの内容が表示されますので、スタイルシートが間違いなく反映されていることを確認します。確認後に分かりやすい文言に修正できますので必要に応じて修正願います。

/*
 Theme Name:   子テーマの名称
 Theme URI:    ＜適宜＞
 Description:  ＜適宜＞
 Author:       ＜適宜＞
 Author URI:   ＜適宜＞
 Template:     親テーマのディレクトリ名
 Version:      ＜適宜＞
 License:      ＜適宜＞
 License URI:  ＜適宜＞
 Tags:         ＜適宜＞
 Text Domain:  ＜適宜＞
*/

　「子テーマ」でコーディングしたスタイルシート（style.css）は「親テーマ」の該当部分を置換します。

３．スタイルシートをキューに入れる

　「子テーマ」のスタイルシートは、「子テーマ」の「functions.php」で「wp_enqueue_script()」を使用してキューに入れる必要があるので、「子テーマ」側で「functions.php」を用意する。「import」命令で親のスタイルシートを取り込む方法は現在では推奨されていません。　

　「子テーマ」の「functions.php」には「子テーマ」のスタイルシートをキューに入れる機能とスタイルシートの場所を指定します。
　「add_action」は関数「theme_enqueue_styles」を使って指定されたファイルにlinkを張ります。
　関数内の「wp_enqueue_style」は「親テーマ」のスタイルシートが存在するディレクトリと同じ場所に「子テーマ」のスタイルシートを優先させるように追加します。「識別名」は他のスタイルシートとの識別用に半角の文字列をセットしておきます。キューにセットされたことを確認する際の目印になります。

<?php

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles()
 	{
   wp_enqueue_style( '識別名', get_stylesheet_uri() );
	}

　「子テーマ」の「functions.php」には「親テーマ」の「functions.php」と同じ内容をコーディングする必要はありません。「functions.php」の内容に追加する形で出来上がります。今後「親テーマ」がどのように変更されても「子テーマ」の内容は追加された形で動きます。「親テーマ」と同じことを記述するとエラーになります。
　「子テーマ」のスタイルシートが反映されないと思われるときには、ＷＰの投稿記事のソースを確認する。識別用にセットした文字をidパラメータの中から探し出す（link　rel=’stylesheet’　id=’識別名’　・・・・）、この方法でスタイルシートが反映される優先順位を確認してください。

<link rel='stylesheet' id='wp-block-library-css'  	   	       href='https://
<link rel='stylesheet' id='wp-block-library-theme-css' 	       href='https://
<link rel='stylesheet' id='wp-lightbox-2.min.css-css'      	   href='https://
<link rel='stylesheet' id='識別名'				   	           　　　　 href='https://
<link rel='stylesheet' id='twenty-twenty-one-style-css'		     href='https://
<link rel='stylesheet' id='twenty-twenty-one-print-style-css'  href='https://
<link rel='stylesheet' id='hcb-style-css'                      href='https://

４．子テーマの「有効化」

　ＷＰの管理画面にログインし、管理画面 → 外観 → テーマに移動します。子テーマが表示され、有効化できる状態になっているので、「子テーマ」を有効化するとカスタマイズされた内容が動き出します。

　「子テーマ」が「有効化」された後は自由に「子テーマ」のテンプレートやスタイルシートを修正してＷＰを利用してください。

子テーマを作成する際の考慮事項

１．テーマについて

　テーマとはWordPress（以下ＷＰと表記）が投稿記事に関するページを事前にデザインし、ｐｈｐプログラム、画像ファイル、jQueryファイル、スタイルシート等を即座に使えるようにセットにして提供しているモノを指します。好みに合わせて複数のテーマ群から選択しＷＰに組み込んで使います。

　ＷＰからは毎年お勧めのテーマが１個提供されます。2020年だと「Twenty Twenty」であり、2021年だと「Twenty Twenty-One」といった分かりやすい名前で年々デザインに改良が加わったテーマが提供されるので気に入ったテーマがあれば取り込んで自由に使うことができます。

　ＷＰからの提供の他に、沢山のテーマがその他企業からも提供されています。投稿記事の配置やコメント受付の位置等々に様々な工夫を凝らして「お勧めテーマ」としてネット上に無料（もしくは有料）て用意されており、これらの中から自由に選び簡単な手順に従ってインストールすればすぐに利用できます。

２．無料と有料の違い

　有料のテーマは、例えばインターネットからの集客を行うことを目的としＳＥＯ対策を施した販売促進用のＷＰテーマとして提供されているモノが有ります。
　一方、無料のテーマは、作成実績の見本として提供されており、いつでも要望に沿ったテーマを開発できます（オーダーメードは有料）といった宣伝材料として示されていると感じます。

３．テーマを使用する条件とは

　無料テーマであれ有料テーマであれテーマはソースコード（原型）で提供されるのでユーザが自由に修正して使用できます。
　さらに修正したテーマを再配布することも可能です、ただし「入手した時と同じ条件で再配布する」のが原則です。ということは入手し修正したテーマに対して著作権を主張し独り占めすることはできません、必ず入手条件に従って再配布することで成り立っているのがＷＰテーマの特徴です。

　次々と新しい内容のテーマが各社から提供されることの要因になっています。

４．テーマを修正すると

　お気に入りのテーマにするために修正を施して使ったとすると、その後もっと好みに合ったテーマが見つかった時には難しい選択を迫られることになります。
　全面的に前のテーマを破棄して新しいテーマを使うのであれば、ＷＰに新しいテーマを取り込めばすぐに問題なく使えます。
　前のテーマに施した修正内容を残して使いたいとなった場合には、新しいテーマに同じ内容の修正を施さないといけなくなります。

　新しいテーマに変えるたびに繰り返し修正作業を行うのは非効率になります。

５．親テーマと子テーマ

　提供されたままのテーマを「親テーマ」とと呼び、修正したい部分だけを抜き出したテーマを「子テーマ」と呼び、繰り返し修正作業が発生することを防止します。
　まず「親テーマ」を使って基礎を築きます、次に「子テーマ」の内容を基礎部分にオーバーラップさせて使用します（上書きされた格好になります）。双方の内容がＷＰの規約に則ってさへいれば、「親テーマ」がどのように作成されていても「子テーマ」が間違いなく反映されます。

　「子テーマ」作成の必要性はこの点です。

外部からＷＰの投稿記事を取り出し編集する

１．外部からの使用を始める

　「wp-load.php」を呼び出し、これからＷＰ投稿記事の情報を取得することを宣言する。ディレクトリー構造を事前に調査し、「wp-load.php」の場所を指定する。

include_once "●●●●/wordpress/wp-load.php"; 

２．「wp_query」とは

　投稿記事のタイトルや本文の内容を取得する際に「WP_Query」といったクラスを使用する。

３．WP_Queryの使用例

// 取得条件を設定する
	$args = Array
		(
		    'post_type' => 'post',      // 投稿を対象とする
		    'posts_per_page' => -1,    	// 表示する投稿数(-1で全投稿)
		);	
	
// クエリの定義
	$wp_query = new WP_Query( $args );　//wp_queryに条件を渡す
 
// ループ
	if ( $wp_query->have_posts() ) 　　　//投稿の有無を確認する
	  {
	    while ( $wp_query->have_posts() ) 　//投稿の最後まで繰り返す
	    	{    	
		      $wp_query->the_post();       //内部変数とグローバル変数を紐付け
		      $posttitle 		= get_the_title();　　　　　//タイトル
		      $postcategory 	= get_the_category();　　//カテゴリー
					foreach($postcategory as $cat) 
				     {	
				     }	        
		      $posttags = 	get_the_tags();　　　　　　 //タグ
					foreach($posttags as $tag) 
				     {	
				     }	     
		      $postexcerpt 	= get_the_excerpt();　　　　//抜粋
		      $postpermalink 	= get_the_permalink();　 //パーマリンク
		      $postdate	 	= get_the_date();            //更新日            
	    	}
	  } 	
	
	
// 投稿データのリセット
	wp_reset_postdata();	

WPへのリクエストを取り扱う関数について

１．投稿記事の取り込み口を用意する

　ループの中で$wp_queryを使用する。postは日本語にすると、投稿（記事）の意味になります。
　whileループの開始時に have_posts() を条件として指定すれば、投稿がある限りwhileループは繰り返され、投稿を取り込み終わるとループも終了します。

	    while ( $wp_query->have_posts() ) 　//投稿の最後まで繰り返す
	    	{   	
　　　　　　　・・・　投稿記事（post）がなくなるまでループ処理が繰り返される
       　　　・・・　投稿記事１件を取得して、このループに入ってくる
	    	}

２．$wp_queryの内容を紐付ける

　反復処理の中では、$wp_query->the_post() を使用する。これによって $wp_query の内部変数とグローバル変数が投稿が１件取り込まれるたびに紐付けられる。

		      $wp_query->the_post();       //内部変数とグローバル変数を紐付け

３．テンプレートタグを使う

　取込まれた内容がグローバル変数に紐つくと、数百種類のテンプレートタグが自由に使えるようになります。テンプレートタグとは WPが事前に定義した関数（要は使い勝手を良くするために用意されている便利なモノ）です。

　投稿タグの例
　　　the_title() ・・・現在のページのタイトル
　　　the_author()・・・投稿記事の作成者名
　カテゴリータグの例
　　　the_category()・・・現在の記事が属するカテゴリー
　　　the_tags()・・・現在の記事に付けられたタグ

　種々のテンプレートタグについては使用手引書等を参考にしてください。使い始めると、徐々に必要なテンプレートタグが絞り込まれてきます、これらを使って自由にＷＰの記事の内容が操作できるようになります。

４．最終処理

　the_post() を使った際には、最後に必ずwp_reset_postdata() を実行する。テンプレートタグが現在の投稿を再び使える状況に戻す処理として必要です。

	wp_reset_postdata();	

投稿記事を外部から扱う準備をする

１．ＷＰの基本構造

　ＷＰプログラムはphp言語で出来ており、プログラムソースが公開されている。誰でも自由にプログラムの内容を見ることでき、必要な情報は再利用できる。

　ＷＰで最初に動くのはwordpressデイレクトリ（インストール時の省略値）の直下にある「index.php」プログラムである。下記に「index.php」の内容を記載する。

/** Loads the WordPress Environment and Template */
require __DIR__ . '/wp-blog-header.php';

２．ＷＰの基本的な動作内容

　「index.php」は「wp-blog-header.php」を自分のプログラムの中に展開しているだけ。「index.php」に起動が掛かって動き出せば、「wp-blog-header.php」にも順序よく制御が渡ってくる。下記に「wp-blog-header.php」の内容を記載する。

	// Load the WordPress library.
	require_once __DIR__ . '/wp-load.php';

	// Set up the WordPress query.
	wp();

３．「wp-load.php」の登場

　「wp-blog-header.php」も同じように「wp-load.php」を自分のプログラムの中に展開しているだけ。そして「wp-load.php」の内容は下記の通りです（動作条件をチエックする処理が数多く組み込まれているので一部省略します）。

	/** The config file resides in ABSPATH */
	require_once ABSPATH . 'wp-config.php';
	require_once ABSPATH . WPINC . '/load.php';
	require_once ABSPATH . WPINC . '/functions.php';

　「wp-load.php」の処理内容は「wp-config.php」、「load.php」、「functions.php」などを順番に展開することがメインとなっている。こうして「wp-load.php」が必要な準備処理の元締めとなっている。この後は各ＷＰ関数の定義ファイルやクラスファイルを順次読み込んでいく処理が連続して行われる。

４．ＷＰ関数を使うには

　外部からＷＰ関数を使うには「wp-load.php」を自分のプログラム内で展開する。これによりＷＰの本体と同じようにＷＰの投稿記事が扱えることになる。

include_once "●●●●/wordpress/wp-load.php"; 

　「include_once」を使って、１回だけの呼び出しを指定する。これは「wp-load.php」が他のプログラムと同時に呼び出される（２重呼び出し）を防止するため。