WordPressカスタマイズ ガイド(マニュアル Ver.2):子テーマ 外部PHP 自作関数でテーマ・プラグインに頼らずサイト改造

子テーマ運用、コピペでOKの外部PHPファイルや自作関数(functions.php )で、集客と売上のできるスマホWebサイト作り
WordPressカスタマイズ ガイド(マニュアル Ver.2):子テーマ 外部PHP 自作関数でテーマ・プラグインに頼らずサイト改造

WordPressカスタマイズ ガイド(マニュアル Ver.2)バージョンアップ

WordPressカスタマイズ マニュアルをバージョンアップ!
名称も、『WordPressカスタマイズ ガイド』に変更

バージョンアップに合わせて、人柱かサンプルか、カスタマイズガイド記載の外部PHPファイルや自作関数を多数導入した、新規サイトを立ち上げている

このガイドのカスタマイズ、外部PHPファイルや自作関数は、基本的には、テーマを選ばない
つまり、どんなテーマでもOK…

上記サンプルサイトで導入し、ガイド購入者に配付する、外部PHPファイルはPHPなどのコードだけでなくインラインCSS付き、子テーマ用functions.phpに自作関数記述済み

サーバーやテーマに問題がなければ、すぐにお好みのカスタマイズが実現!
(ごくごく稀に、サーバーやテーマ、あるいはプラグインなどの影響で、期待どおりの結果にならない場合もあり)

PHPとHTMLとCSS

WordPressのカスタマイズの要は、WordPressの関数を含むPHP記述、HTMLコーディング、CSSの3つ

とくに、最後のCSS(子テーマのstyle.css)が、親テーマのCSSと対決をすることになって、最高のストレスとなる
見出しタグ(h1やh2などなど)、段落タグ(p)、リスト(li)やまれにdivなど、「どうして?」と、意図どおりの表示にならないことが多いんだよ!

カスタマイズ ガイドのアピールポイント

WordPressのエレメント
タイトル、抜粋・説明・description、サムネイル
この3点セット
カテゴリー/タグをベースに

トップページや、カテゴリー/タグのアーカイブなどの、フィード
個別投稿の、同じカテゴリーや同じタグの関連コンテンツ

他者サイトを参照、コード・ソースを参考に、人気ページお気に入り

サイト作成、ページ数増には、CSVインポートも手がけたい
最強のプラグインWP All Importを、CSVファイルとインポート用テンプレートも配布して、実用的に解説

3点セットはカード型 flexbox活躍

3点セットは、カード型をflexboxで実現

flexboxは、
HTMLコードを、
HTMLコードのclassを、
子テーマのstyle.cssや外部PHPファイルのインラインCSSを、
ほんの少し修正・削除・追加するだけで、デザインは自由自在

flexboxによるカード型01
flexboxによるカード型02
flexboxによるカード型03

上図もflexboxで並べている
デバイスの画面幅に合わせて、画像そのものが縮小されて横並びのまま、スマホ縦では縦並びに

トップページ カテゴリー/タグアーカイブなどのフィードもflexbox活用

flexboxであってもなくても、フィードで
カード型を複数並べるのもflexboxで

フィード SEOブログ パソコン版

 

フィードは、スマートフォンの縦画面では次のような表示。画像左のテキスト右で、縦並び。
中型スマホでは、横3個の折り返し。小型スマホでは、横2個で折り返し

フィード SEOブログ スマホ版
フィード スマートフォン 3横並び
フィード スマートフォン 2横並び

パソコンでは、フィードは横6個で折り返し

フィード パソコン 6横並び

さらには、水平スクロールさえも、flexboxで

フィード 水平スクロール

同じカテゴリーや同じタグの関連コンテンツ

個別投稿では、カテゴリーやタグをきっちり設定して
関連コンテンツを表示
ユーザー利便性も高まり、他のページへの遷移を促し、ページビューも増える

タグの関連コンテンツ SEOブログ

 

flexboxだから、折り返しで複数並べることも、水平スクロールも、できる

関連コンテンツ 水平スクロール

人気ページやお気に入り

人気ページやお気に入りは、他者様のコードやソースを、ほぼそのまま使わせていただいている

参照元を明記しているので、みなさんも記載されているコードやソースを参考に、実装することもできるはず

バージョンアップで解説し、外部PHPファイル(インラインCSS付き)を配付するようにしているが、このカスタマイズ ガイドがなくても、参照元を見て実装できると思う

人気ページ

人気ページ、ユーザーがよく見ているページを表示したい
ユーザーにとっても、発見がある
サイトオーナーにとっても、意外なページが閲覧されていると気づきがある

これは、下記ページの「functions.php コード」を採用させていただいている

「人気記事を表示する」は、PHPはごくごくわずかを修正
記事を表示する箇所は、カード型に変更

なお、これに限らずだが、個別投稿や(固定ページも)ループで読み込むときに、「foreach」ではうまくいかないことがある
サーバーか、テーマか、なにかのプラグインか、邪魔をする
より汎用性を求めるために、ループは「while」にしている

そのため、「ごくごくわずか」の修正は、そのループのコードを変更するにあたって、数行を書き換えている

なお、弊社管理サイトでも、うまく稼働しないものがある
サーバーの問題か、テーマの問題か、デバイスの問題か、よく分からないままである…

アクセス数を、独自のカスタムフィールドに追記し、それを検索してカウントするので、そこが邪魔されている可能性もある

人気のページ

お気に入り

お気に入りは、プラグインFavoritesを導入

最大の難関は、ユーザーごとにお気に入りの一覧ページをつくること

上記ページを見つけなかったなら、実現できなかった
感謝! 感謝!!

Favoritesの解説は、いくらでも検索で探し出すことができる
また、お気に入り一覧ページも、表示できるショートコードも見つかる

ただ、上述のフィードや関連コンテンツのように表示したいときに、つまりサイトのデザインに合わせたものを表示させることに、どうしようもなく難儀するわけである

上記ページには、一覧表示のコードが2つ記載されていて、それを合体させ修正している

例によって、foreachでは表示されないテーマがあるので、汎用性のあるwhileを採用

ただし、Cookie利用を承諾してもらう必要があり、ユーザーごとに違うものが表示されるので、とくにキャッシュ系プラグインで、キャッシュから除外しておく必要がある

あなたのお気に入り

WordPressカスタマイズ ガイドの目次(内容)

目次は抜粋、省略しております

【f】別途ダウンロード functions.php にコード記載
【p】別途ダウンロードの外部PHPファイル(ほとんどインラインCSS付き)

スタート編:WordPressの初期設定と事前設計など(70ページ)

  • カスタマイズ ガイドの方針
    • 第1方針:キーワード、内部リンク、ページ数を多く
    • 第2方針:検索の不調/不振とURL
    • 第3方針:モバイルファーストの真相
    • 第4方針:Webページをパーツに分解してSEO施策はモジュールで
    • 第5方針:ユーザー利便性とSEOの二刀流
  • WordPressの初期設定
  • WordPressサイトの事前設計
    • タイトルと説明文とサムネイル
    • 【重要】カテゴリー:URLとサイト構造
    • コアアップデート対策としてリベンジサイトで成功した事例
    • 個別投稿の設計

カスタマイズ編:子テーマ運用 外部PHPファイル 自作関数(190ページ)

  • 子テーマのfunctions.phpなどでカスタマイズ
  • 自作PHP読み込み
    • 【p】get_template_part:テーマファイルで読み込み
    • 【f】ショートコード:phpが書けない場所で
  • 子テーマファイルとカスタマイズの実例
    • タイトル
      • 【f】get_my_title:様々なtitleとfunctions.phpで自作関数
    • 抜粋 説明 description
      • 【f】get_my_description:meta descriptionと抜粋・説明の自作関数
      • 【f】get_my_description_null:念のため抜粋・説明が空のとき
    • サムネイル(アイキャッチ)
      • 【f】get_my_thumbnail_imag:サムネイル無しでページの最初の画像を取得
      • 【f】get_my_thumbnail_alt_plus:サムネイルalt属性自動追加自作関数
  • カテゴリー関連
    • カテゴリーの取得とリンクつき表示
    • 【p】カテゴリー一覧:wp_list_categories
    • 【p】カテゴリーごとの記事一覧
    • 【p】特定のカテゴリーに属するページを書き出す
    • 【p】同じカテゴリーの関連する他ページ
  • タグ関連
    • 省略
  • 【p】OGP設定
  • 8. ヘッダー箇所/フッター箇所
    • 【p】フッターナビゲーションバー
  • カテゴリートップ/タグトップをカード型で構築
    • カード型はGoogle AdSenseネイティブ広告のベース
  • カスタマイズ実践
  • その他
    • Webフォント(アイコン)
    • WordPressのtarget="_blank"およびnoreferrer
  • 【f】【p】カード風デザインの完全版ソースを取得するチップス
  • 【f】【p】個別投稿/固定ページ/カテゴリー/タグ 情報一覧

付録:プラグインなどを紹介(120ページ)

  • プラグインの簡単な紹介
    • 省略
  • 【f】【p】人気記事を表示
  • 【p】お気に入り機能:Favorites
  • WP All Importで CSVのインポート
  • パソコン ブラウザーで確認
  • 実機(スマートフォン デバイス)で確認

マニュアル/ガイド サンプル集:flexbox / UI/UX / フッターナビゲーション(SEOマニュアル共通)

  • flexbox
    • 行列順逆
    • レスポンシブで横並び個数を変更
    • 関連コンテンツ作成
    • 水平スクロール
  • UI/UX
    • パララックス
    • アニメーション
    • スライドショー CSS
    • アニメーション画像 APNG / WebP
    • リンクの波紋
  • ナビゲーション
    • フッターナビゲーションバー(モーダルウインドウ)

「マニュアル Ver.1」から【WordPressカスタマイズ ガイド(マニュアル Ver.2)】にバージョンアップをご希望の方

先代の「WordPressカスタマイズ マニュアル」をお持ちで、【カスタマイズ ガイド】にバージョンアップをご希望なさる場合は、「5,000円」にお請けいたします。

お問い合わせからお申し込みください
PayPal支払いも、その旨お書きくださいね

WordPressカスタマイズ ガイド のお申し込み

インフォトップでのご購入

インフォトップで【WordPressカスタマイズ ガイド】ご購入

お支払い方法:クレジットカード・銀行振込・郵便振替・コンビニ・BitCach・ちょコムeマネー

SEO塾/アルゴリズム社の直販をご希望

下記のお申し込みフォームをご利用ください。

お支払い方法:銀行振込またはPayPal

銀行振込 のお申し込み手順

(1) 下記フォームメールによる購入申し込み
(2) アルゴリズム社からの、振込先のご案内のメール
(3) 案内メール受信後、ご入金
(4) 振込完了(守秘義務承諾、ダウンロード要領請求)のメール送信
(5) アルゴリズム社から、ダウンロードURLとID・パスワードのお知らせ

PayPal のお申し込み手順

(1) 申し込み下記フォームメールで、「PayPal」にチェックして購入申し込み
(2) PayPalでの支払いへPayPalからお申し込みのメールアドレス宛に、請求書を送ります
(3) PayPalで決済(2)請求書にしたがって、ご入金
(4) PayPalにて支払い完了PayPalお支払いと同時に、守秘義務承諾、ダウンロード要領請求となります
(5)ダウンロード要領アルゴリズム社から、ダウンロードURLとID・パスワードのお知らせ

PayPal支払いなら「5%相当額還元」適用、銀行振込も可能です

キャッシュレスで5%相当額還元

ペイパル|銀行決済も手数料0円、カードのポイント貯まる|VISA, Mastercard, JCB, American Express, Union Pay, 銀行

疑問な点がありましたら、お問い合わせからどうぞ。

お申し込みフォーム

お申し込み20,000円:WordPressカスタマイズ ガイド
はじめての方もリピーターもプライスは同じです
同時お申し込み20,000円:SEOマニュアル コアアップデート対応
同時にお申し込みの場合はチェックしてください
お支払い(必須項目) / 
お名前(必須項目)
フリガナ(必須項目)
メールアドレス(必須項目)
弊社ではメールアドレスをお申し込み者の識別子としております。
原則として、お申し込み後に変更なさらないようにお願いします。
また、お申し込みのメールアドレスを見て、これからのご優待などを判断しますので、決して使い捨てメアドはご利用なさらないようにお願いします。
会社名(事業者名)
都道府県名(必須項目)
サイト名
サイトURL
メッセージ(必須項目)
ご確認必須項目に記入漏れがないことを確認して、下の「決定」ボタンを押してください。

キャッシュレスで5%相当額還元