サブループセットのバリエーションです。
「カテゴリーごとに最新記事を4件づつ表示」みたいな感じです。
カテゴリごとにアーカイブへのリンクが自動出力されます。
レイアウト集サブループセット（カテゴリー別表示）
optionblock samplesample subloop cats set
セット見出し
デフォルトのスタイルです。
プラグイン
SNS関係
シェア、コンテンツ埋め込み、タイムライン等について
シェア
「テーマオプション > シェアボタンを表示する」のチェックで投稿記事本文末にボタンリストが出力されます。
※固定ページには出力されません。
内容は「assets/content-share-btns.php」に記述してあります。
呼び出しは、ごく普通のファイル読み込みです。
<?php
get_template_part( 'assets/content', 'share-btns' );
?>コンテンツ埋め込み
ユーチューブ
URL貼り付けでうまく表示されないときは［movie］［/movie］で囲ってください。
※［］は、実際には[]（半角）を使ってください。
※ショート動画フォーマットには対応していません。
グーグルマップ
下に妙な余白が出るときがあります。気になる場合は
.g-map、.g-map pを付与するか、「line-height: 0.8;」にしてみてください。
タイムライン
ツイッター
ショートコードで出力可能です。
FB
ディベロッパー向けページでコードを取得してください。
インスタグラム
下記プラグインを試してください。
- Smash Balloon Instagram Feed
- Social Feed Gallery
※どちらも安定しているとは言い難いですが、「マシ」な方を使ってください。
※セッティングの際は、同じブラウズでインスタグラムにログインしておいてください。
セッティング自体は列数やボタンの有無等を制御するだけ。見ればわかります。
TikTok
色々なやり方があるようですが、プラグインは良いものが無い感じです。
いまのところ、アカウントの設定内で取得できるコードを貼り付けるのが無難。
サイトのまるごとバックアップと複製
All-in-One WP MigrationとUnlimited Extensionを使用して、サイトのクローンを作成したり、バックアップを取る方法を簡単に解説します。
All-in-One WP Migrationは無料ですが、データ容量に制限があり、ほぼ遣い物にならないので「Unlimited Extension」との併用がお勧めです。
A：バックアップ
1：プラグインを有効化すると、管理画面メニューに「All-in-One WP Migration」という項目が追加されます。
2：サブ項目の「エクスポート」を選びます。
3：高度なオプションの、任意の項目をチェックします。
下記がお勧めです。
- スパムコメントをエクスポートしない
- 投稿リビジョンをエクスポートしない
- Do not export inactive themes (files) new
- Do not export inactive plugins (files) new
- Do not export cache (files) new
- メールアドレスのドメインを置換しない (SQL)
3：エクスポート先：ファイルを選びます。
4：しばらく待つとダウンロードリンクが表示されるのでダウンロードします。
B：レストア
Aと逆の手順を踏みます。
1：管理画面メニュー「All-in-One WP Migration」⇒サブ項目の「インポート」を選びます。
2：Aでダウンロードしたファイルなどを選びます。
3：YES、YESと選択していきます。
3：「Complete」が出たら再度ログインして完了です。
注意
サーバーの状態やサイトの状態により、いずれかのプロセスでフリーズ、エラーが出て中止等が起き得ます。
この時の対処法によっては取り返しがつかなくなるケースもあるので、速やかにテーマ制作者にご連絡ください。
推奨プラグイン
必須プラグインと、任意のおすすめプラグインです。
有料プラグイン以外は公式ディレクトリ（ = 管理画面メニュー > プラグイン > 新規追加 で選べる）にあります。
必須プラグイン
Advanced Custom Fields PRO
有効化が必須です。有効化していないとエラーの嵐になります。
追加ブロックや各種オプションなど、テーマ内の各所で使用しています。
有料で、ライセンス形式は最近変更になりました。
私が使用しているのは永久ライセンスで、使用サイト数の制限なし、また将来のアップデートが約束されています。
現在新規契約は年間ライセンスで「使用するだけなら契約を更新しなくてもいいけど、アップデートは出来なくなるよ」というものです。
不具合が出たら再契約してアップデート、でもいいかもしれません。
弊社テーマで使用する際は、「フィールドグループ」という設定ファイルを読み込むことで各種機能が有効になります。
テーマカスタマイズの50%を担う重要ポジションです。用途、機能が多岐に渡るのでまとめることは出来ません。検索等で拾ってください。
MW WP Form
お問い合わせなどのフォーム機能を追加します。
「Contact form 7」と人気を2分していますが、弊社では基本的に「MW WP Form」を使用します。
デフォルトのフォームは同プラグインで動作します。
よく使いそうなカスタマイズはテーマに内包していますが、UIは用意していませんのでこちらも検索して拾って下さい。
reCAPTCHA for MW WP Form
「MW WP Form」に、スパムメールをブロックする機能を追加します。
スパムの被害が深刻化しているケースがままあるので、特別な場合を除いて使用します。
推奨プラグイン
パンくずリストを表示する働きをします。
テーマにもパンくず機能は内蔵されていますが、同プラグインほどの機能はなく、カスタマイズも面倒です。
Advanced Editor Tools
ビジュアルエディターに機能を追加します。
表の作成／編集、「スタイル」の追加等、無いと編集がかなり不便です。
Intuitive Custom Post Order
「記事の並べ替え」機能を追加します。
ワードプレスにおいて記事は新しい順に並びますが、固定ページや分類等、手動で並べ替えたいケースがあります。
同プラグインを有効化し、並べ替えたい項目を指定すると、ドラッグ＆ドロップが有効になります。
※テーマ内の設定で「管理画面順に並べる」という指定が必要な場合もあります。
Easy FancyBox
ギャラリー等、画像の拡大リンクを「ライトボックス」風にポップアップさせます。
有効化していないと、ページ遷移するだけになるので、コンテンツにギャラリーがある場合は有効化をお勧めします。
★こんな感じにすると画像以外もポップアップできる。
<div style="display:none" class="fancybox-hidden"><div id="fancyboxID-1" class="hentry" style="width:460px;max-width:100%;">
...inline content here...
</div></div>
<p><a href="#fancyboxID-1" class="fancybox-inline">Read my inline content</a></p>Search & Filter Pro
クロス検索等、データベースサイトで必須の検索機能を追加します。
有料で、「Advanced Custom Fields PRO」と同じようなライセンス形態です。
プラグインサイトに使用するサイトを登録する必要があります。
管理が面倒ですが、他に選択肢が無いので今の所コレ一択です。
WP Mail SMTP
メールフォームが上手くいかない場合に有効化、設定します。
Aレコードを書き換えている場合等、メールサーバーが別の所にある場合がほとんどです。
非常にややこしいので詳しくは別記事で。
開発時にあると便利なプラグイン
All-in-One WP MigrationとUnlimited Extension
サイトのクローンを作成する際に便利です。
ワードプレスを新規インストールした場合、テンプレート化したクローンを読み込むと、最低限の設定がなされた状態でスタート出来ます。
リニューアル案件で、現状をバックアップしたい場合にも利用します。
「Unlimited Extension」のみ有料です。
無料版ではデータ容量に制限があり、ほぼ遣い物にならないので「Unlimited Extension」との併用がお勧めです。
Yoast Duplicate Post
記事を複製できます。
ダミー記事が複数必要な際に便利です。
Menu Duplicator
「メニュー」を複製します。
メインのナビゲーションと、フッターのナビゲーションが「微妙に」違う場合など、「メイン」を複製しアレンジしてフッターに使用するようなケースで便利です。
Really Simple CSV Importer、WP All Import、WP All Export
CSVからインポート、エクスポートするツール。インポートだけなら「Really Simple CSV Importer」が使いやすい。
Post Type Switcher
標準投稿を「お知らせ」にコンバートしたり、求人情報のスラッグ「recruit_info」を「job_information」に変更したい場合などに便利です。
Taxonomy Switcher
「Post Type Switcher」との併用で便利です。分類も一括で変更したい場合に。
Term Management Tools
こちらもタームの変更ツール。「Taxonomy Switcher」よりも細かく編集出来た気がする。
Export media with selected content
有効化すると、アイキャッチや記事中の画像込みでエクスポートファイルを作ってくれます。
※エクスポート時は「Export media with selecter content」のオプションをONにすること！
また、インポート時は「添付ファイルをダウンロードしてインポートする」をONに！
CSS
CSS変数について
CSS変数（正確にはCSSカスタムプロパティ）についてざっくりと。
サイト幅
:root {
--site-width: 1000px;
--site-width-padding: 40px;
--scroll-bar-width: 17px;
--site-width-media-query: 1057px;
}- コンテンツ領域 = 1000px
- ブラウザ端からコンテンツ領域までの余白が40px（左右20pxづつ）
- スクロールバーを常に表示しているのでその幅17px
- これらをひっくるめた幅が1057px
これらと、以下のメディアクエリ
- PCのブレークポイント769px
- 横スクロールなしで表示できる幅1057px
を組み合わせています。
変更例
コンテンツ領域を1200pxにしたい場合は、
:root {
--site-width: 1200px;
--site-width-padding: 40px;
--scroll-bar-width: 17px;
--site-width-media-query: 1257px;
}となります。
※common.cssとサイトごとの固有cssの2カ所に記述しています。
他は色やウェイト
color、font-weight程度しか使っていません。任意に追加してください。
CSSファイルの構成
大まかには、下記のファイルで構成されています。
- common.css
基本的なレイアウトやフォームの外観等を記述してあります。
特別な理由が無い限り編集しないでください。 - css/dialogue.css
吹き出し会話風のレイアウトを決定しています。めったに使わないので無視してOK。 - css/XXX.css
サイトによって変わる「サイト専用」CSSです。
テーマカラー、サイト幅、独自のレイアウトルール等、互換性のないサイト独自のスタイルです。
「オプション」で読み込みをしています。
参考：エクストラCSSを使う - css/front-end-style.css
サイト表示だけに使われるCSSです。
「文字色 = 白」のように、編集画面で読み込まれると都合の悪い設定を記述してあります。
※css/XXX.cssも編集画面には読み込まれません。 - style.css
基本的に空白でお渡ししています。
どうしても変えたい項目がある場合はココに記述すると、比較的安全にカスタマイズできます。
プリセットのCSSクラス
ビジュアルエディターのスタイル等では選べない「文字列記述」型のCSSクラスです。
あらかじめCSSファイルで定義されている項目は、クラス名の付与では有効にならない場合があります。その場合は「style.css」で定義を上書きしてください。
main-padding-top-0
#mainブロックの上余白を”0″にします。
記述場所：固定ページ設定 > このページのclass
main-padding-bottom-0
#mainブロックの下余白を”0″にします。
記述場所：固定ページ設定 > このページのclass
margin-top-0
上余白を”0″にします。
記述場所：おもに追加ブロックの「セット全体の追加クラス」
ほかの任意の箇所に記述しても大体動作します。
lr-left-full、lr-right-full
2カラムセットの左右どちらかだけ全幅にします。
記述場所：おもに追加ブロック「2カラムセット」の「セット全体の追加クラス」
flex
通常縦に積まれる要素を横に並べます。
記述場所：おもに<ul>
派生：flex-pc
大きい画面でだけ横に並べます。
display-pc
大きい画面でだけ表示します。
「display: block」等、あらかじめdisplayに関して記述がされている場合は無効になります。
派生：display-m
小さい画面でだけ表示します。
grid-columns-376-427-3
ブラウザ幅によるグリッド列数を例外的にコントロールします。
376px ～ 427pxの時、列数を「3」にします。
記述場所：おもに追加ブロックの「セット全体の追加クラス」
grid-gap-0
グリッドの余白を0にします。
記述場所：おもに追加ブロックの「セット全体の追加クラス」
blockquote-simple
吹き出しっぽくない簡易的な装飾の引用
記述場所：blockquoteへの付与。
※「スタイル」から選択可
blockquote-decoration-none
一切の装飾が無い引用
記述場所：blockquoteへの付与。
※「スタイル」から選択可
数が多いので、順次加筆中
基本設定
出現の可能性が高いPHPエラーについて
- 変数に関する仕様がPHP8で大きく変わりました。
結果、こんな感じのエラーが出る可能性があります。
Warning: Undefined variable $hoge in/サーバーパス/ドメイン/public_html/wp/wp-content/themes/P3/header.php on line ‘行数’
これは「header.phpのXXX行目に書いてある変数$hogeが定義されていないよ」というような意味合いです。
該当のソース
if( is_page( 'test' ) ){
$hoge = 'mess';
}
echo $hoge;「固定ページtestならば、変数$hogeにmessを代入して出力しなさい」というような意味ですが、固定ページtestではない場合どう処理するかが書かれていません。
PHP8以前は勝手に「$hoge = ”」と処理されていましたが、ここが厳密になりエラーを出すようになりました。
修正後のソース
if( is_page( 'test' ) ){
$hoge = 'mess';
}else{
$hoge = '';
}
echo $hoge;または
$hoge = '';
if( is_page( 'test' ) ){
$hoge = 'mess';
}
echo $hoge;出たり出なかったり
このエラーメッセージは、サーバーによって出たり出なかったりします。
また、テーマオプション「テンプレート判別タグを表示する」をチェックしていない場合、エラーは出力されません。
サイトのまるごとバックアップと複製
All-in-One WP MigrationとUnlimited Extensionを使用して、サイトのクローンを作成したり、バックアップを取る方法を簡単に解説します。
All-in-One WP Migrationは無料ですが、データ容量に制限があり、ほぼ遣い物にならないので「Unlimited Extension」との併用がお勧めです。
A：バックアップ
1：プラグインを有効化すると、管理画面メニューに「All-in-One WP Migration」という項目が追加されます。
2：サブ項目の「エクスポート」を選びます。
3：高度なオプションの、任意の項目をチェックします。
下記がお勧めです。
- スパムコメントをエクスポートしない
- 投稿リビジョンをエクスポートしない
- Do not export inactive themes (files) new
- Do not export inactive plugins (files) new
- Do not export cache (files) new
- メールアドレスのドメインを置換しない (SQL)
3：エクスポート先：ファイルを選びます。
4：しばらく待つとダウンロードリンクが表示されるのでダウンロードします。
B：レストア
Aと逆の手順を踏みます。
1：管理画面メニュー「All-in-One WP Migration」⇒サブ項目の「インポート」を選びます。
2：Aでダウンロードしたファイルなどを選びます。
3：YES、YESと選択していきます。
3：「Complete」が出たら再度ログインして完了です。
注意
サーバーの状態やサイトの状態により、いずれかのプロセスでフリーズ、エラーが出て中止等が起き得ます。
この時の対処法によっては取り返しがつかなくなるケースもあるので、速やかにテーマ制作者にご連絡ください。
ランディングページ
外部HTMLではなく、WP内でLPを作る
「ページ属性 > テンプレート > デフォルト」を「ランディングページ」に変更することで、ランディングページ固有のオプションが現れます。
CSSファイルは、通常ページ用のカスタマイズCSSは切り離され、コモン（リセット用）とLP用のものだけが読み込まれます。
固有オプション
- 通常のヘッダーパーツをつける／つけない
- 通常のフッターパーツをつける／つけない
- ページ固有のヘッダー／フッターに置き換える
- ページ固有のロゴに置き換える
コンテンツ部分は通常の固定ページと同一なので、各種セットを自由に並べることが出来ます。
ショートコード
SNS関係
シェア、コンテンツ埋め込み、タイムライン等について
シェア
「テーマオプション > シェアボタンを表示する」のチェックで投稿記事本文末にボタンリストが出力されます。
※固定ページには出力されません。
内容は「assets/content-share-btns.php」に記述してあります。
呼び出しは、ごく普通のファイル読み込みです。
<?php
get_template_part( 'assets/content', 'share-btns' );
?>コンテンツ埋め込み
ユーチューブ
URL貼り付けでうまく表示されないときは［movie］［/movie］で囲ってください。
※［］は、実際には[]（半角）を使ってください。
※ショート動画フォーマットには対応していません。
グーグルマップ
下に妙な余白が出るときがあります。気になる場合は
.g-map、.g-map pを付与するか、「line-height: 0.8;」にしてみてください。
タイムライン
ツイッター
ショートコードで出力可能です。
FB
ディベロッパー向けページでコードを取得してください。
インスタグラム
下記プラグインを試してください。
- Smash Balloon Instagram Feed
- Social Feed Gallery
※どちらも安定しているとは言い難いですが、「マシ」な方を使ってください。
※セッティングの際は、同じブラウズでインスタグラムにログインしておいてください。
セッティング自体は列数やボタンの有無等を制御するだけ。見ればわかります。
TikTok
色々なやり方があるようですが、プラグインは良いものが無い感じです。
いまのところ、アカウントの設定内で取得できるコードを貼り付けるのが無難。
主なショートコード
ターム（タグ）出力
例：すべての投稿タイプのターム一覧を出力する。
プラグインCSS基本設定ショートコードCSS変数SNSPHPエラー開発者向けバックアップレストアクローン構成ファイルSSLサーバーCSSHTMLショートコードエラーメッセージスクリプトセキュリティプリセットページ内遷移リンク参考記事エラー仕様変更機能追加ショートコードオプション重要ワードプレスPHP関数ファイルCSSJava-scriptHTMLカスタムフィールドテンプレートタグカスタム投稿タイプタクソノミーショートコードタームタグ、カテゴリーサーバーMW WP FormアドバンスドカスタムフィールドサブループiOSアニメーションクロームWordPress Popular PostsLightboxウィジェットIE手動インストールMac OS
例：「update」投稿タイプのターム一覧を出力する。
例：「update」投稿タイプ、「更新履歴分類1」のターム一覧を出力する。
タグクラウドリスト
投稿に紐づく特定のタクソノミーを出力
例：標準投稿タグ、リンク無し、pで囲む、そのクラスに「taglist」を追加
開発者向け
- tax=”post_tag”
出力したいタクソノミー（省略時はカテゴリー） - link=”false”
パーマリンクを付ける・付けない（省略時はリンクあり） - wrapper=”p”
ラッパータグ（省略時はspan） - class=”taglist”
よく使うclassがあればソレを。
サブループ
例：「update」投稿タイプの記事一覧を出力する。アーカイブへのリンクもつける
update投稿、ブロックタイトルあり、アイキャッチあり、グリッドスタイル、日付あり、要約なし、タグリストあり
update更新履歴のサブループ
2023.06.22
出現の可能性があるPHPエラーについて
2023.06.21
p3テーマの開発完了
2023.06.21
ボトムバナー表示オプションを追加
2023.05.21
カスタム投稿のターム表示を細分化（テーマオプション）
2023.04.26
記事総数を出力するショートコードを追加
ワードプレスのルートへリンク
ビジュアルエディタ内に書いたリンクを設置フォルダに合わせます。
クローンを作る際、WPをサイトルート以外に設置した場合のリンクエラーを回避します。
- 例：トップ
トップページ - 例：お問い合わせ
お問い合わせを新しいタブで開く
公開済み投稿の実数を出力
- 例：「count_posts」
このサイトの公開済み標準投稿の総数は「19」件です。 - 例：「count_posts post_type=”faq”」
このサイトの公開済みFAQ投稿の総数は「12」件です。
検索窓
サイト内検索のボックスを出力します。
※実質、ウィジェット「ナビゲーション内アイテム」「ナビゲーション内アイテム（小）」専用です。本文等に書いても正常動作しません。
タブレイアウト
カテゴリー毎表示を更にタブレイアウトで表示します。
postテーマ解説
CSSファイルの構成
大まかには、下記のファイルで構成されています。 common.css基本的なレイアウトやフォームの外観等を記述してありま…
プリセットのCSSクラス
ビジュアルエディターのスタイル等では選べない「文字列記述」型のCSSクラスです。あらかじめCSSファイルで定義されている…
出現の可能性が高いPHPエラーについて
変数に関する仕様がPHP8で大きく変わりました。結果、こんな感じのエラーが出る可能性があります。Warning:Unde…
サイトのまるごとバックアップと複製
All-in-OneWPMigrationとUnlimitedExtensionを使用して、サイトのクローンを作成したり…