Memo

メモ > 技術 > CMS: WordPress

■導入
■ダウンロード 公式サイトからダウンロードできる https://ja.wordpress.org/ 旧バージョンは以下からダウンロードできる https://ja.wordpress.org/releases/ ■必要環境 「PHP バージョン7.3以上、MySQL バージョン5.6または MariaDB バージョン10.0以上のサーバーを推奨しています。」となっている 現状はPHP5.6以上だと動作するみたい php-xml が無いと所々機能せずにハマるので、はじめからインストールしておくことを推奨 日本語 - ダウンロード - WordPress https://ja.wordpress.org/download/ WordPressを動かすのに必要なPHPと関連モジュールのインストール | Hodalog https://hodalog.com/how-to-install-php/ ■マニュアル WordPressの使い方 - インストールから基本的な使い方まで https://www.adminweb.jp/wordpress/ WordPress Codex 日本語版 http://wpdocs.osdn.jp/Main_Page 以下にスクリーンショットがあるので活用できそう その他、設置する際やマニュアルを作る際に、参考になりそうな資料がたくさんある WordPress スクリーンショット集 - WordPress Codex 日本語版 http://wpdocs.osdn.jp/WordPress_%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%8... ■インストール WordPress(ワードプレス)をインストールする方法【初心者向け】 | TechAcademyマガジン https://techacademy.jp/magazine/1354 WordPress(ワードプレス)の使い方 / ホームページ・ブログ作成 / マニュアル - レンタルサーバーならロリポップ! https://lolipop.jp/manual/hp/wordpress-lecture/ WordPress(ワードプレス)とテーマ・プラグインの更新 / ホームページ・ブログ作成 / マニュアル - レンタルサーバーならロリポップ! https://lolipop.jp/manual/blog/wordpress-update/ ※「検索エンジンにインデックスさせるか否か」の設定はインストール時にも表示されるが、 「インデックスさせる設定にしてBasic認証をかけておく」とする方が無難 (Basic認証の外し忘れはまず無いが、インデックスの設定変更のし忘れは十分に起こりうるため) ■マルチバイト対応プラグインをインストール WordPressをインストールしたら、とりあえず以下のプラグインを入れておくといい WP Multibyte Patch - EastCoder; https://eastcoder.com/code/wp-multibyte-patch/ ■ローカル開発環境 XAMPP・Vagrant・Dockerなど、自分に合ったものを使えばいい それらで敷居が高いを思うようなら、Localというアプリを使う手があるみたい(未検証) 【超簡単】Local by Flywheelを使ってWordPressのローカル環境を構築する | 【運用・改善が得意な仙台のホームページ制作会社】AndHA(アンドエイチエー) https://and-ha.com/coding/local-wordpress/ 10分で完了!WordPressのローカル環境構築なら「Local」 | wp.geek https://wpmake.jp/contents/knowledge/construct/about_local/ ■バージョン5 2018年12月7日にVer5が公開された 新エディタとしてGutenberg(グーテンベルク / 活版印刷技術の発明者「ヨハネス・グーテンベルク」にちなんだ名前)が採用されたことが大きな変更点とされる 実際に少し触ってみたところ、WordPress5になってもインストール手順は特に変わらず Ver4のときに作った「Simple」テーマも、特に問題なく使用できた。Ver5付属のテーマと比べても、特に問題なく使えそう 管理画面の雰囲気なども大差ないが、細かい部分で改良されているみたい 投稿画面の仕組みは大きく変更されているので慣れは必要そう WordPress 5.0の新機能について(Gutenbergが登場) https://kinsta.com/jp/blog/wordpress-5-0/ WordPress 5.0のGutenberg(グーテンベルグ)についてよくある質問集 | コリス https://coliss.com/articles/blog/wordpress/wordpress-5-gutenberg-faq.html 衝撃に備えろ!WordPress 5.0では新エディタ「Gutenberg」が採用され旧エディタは廃止!? | 陸マイラーとーみねのほったらかし投資録 https://tomine-blog.net/wordpress/wordpress-5-0-gutenberg ワードプレス 5.0の新機能〜使いにくい場合の対処法は?〜 - WordPress超初心者講座 https://wp-exp.com/blog/wordpress-5-0/ Classic Editor プラグインをインストールして有効化すれば、Gutenbergではない以前のエディタが表示される エディタだけではなく、入力画面全体がVer4のときのような表示になる Classic Editor の評価は非常に高い Classic Editor - WordPress プラグイン | WordPress.org https://ja.wordpress.org/plugins/classic-editor/ 以下に単体でのGutenbergがある。Gutenbergの評価は非常に低い Gutenberg - WordPress プラグイン | WordPress.org https://ja.wordpress.org/plugins/gutenberg/ Classic Editor を入れなくても、function.php に以下を追加するだけでもGutenbergを無効にできるかも(要検証)
add_filter( 'use_block_editor_for_post', '__return_false' );
■ブロックテーマ ※未検証 テーマの仕組みが大きく変わるらしい WordPressの今までの解説書は全部過去のものに、制作の仕様が大きく変わったブロックテーマの使い方がよく分かる解説書 -作って学ぶWordPressブロックテーマ | コリス https://coliss.com/articles/book-review/isbn-9784839981877.html WordPressのブロックテーマとは?おすすめのブロックテーマ7選|Webgaku(ウェブガク) https://webgaku.net/jp/wordpress/block-theme/ フルサイト編集に対応したブロックテーマを作ってみる | オレインデザイン https://olein-design.com/blog/tried-to-create-block-theme ■バージョン確認 管理画面のダッシュボードで確認する コードレベルで確認する場合、wp-includes/version.php で確認できる 今使っているWordPressのバージョンを調べる方法 - キーワードノート https://kw-note.com/cms/get-wordpress-version/ ■バージョンアップ 管理画面の「更新」メニューからバージョンアップできる FTP情報を求められる場合、以下を参考にする wp-config.php に以下を追記する…が手軽で影響も少なくて良さそう
/** * WordPressの更新にFTP情報を要求しない */ define('FS_METHOD', 'direct');
WordPress更新時にFTP情報入力画面が表示される場合の対処方法3つ | sand a lot Web & Music Create [札幌] https://www.sandalot.com/wordpress%E6%9B%B4%E6%96%B0%E3%81%A7ftp%E5%85%A5%E5%8A%9B%E7%94%BB%E9%9D%A2... Wordpressの更新で、FTP経由のアップデートを回避する方法 - Qiita https://qiita.com/pugiemonn/items/c3f9bca255082a085b6c 「FTP情報が必要」WordPressのプラグイン・本体の更新ができない | ホームページ制作 京都 ファンフェアファンファーレ http://funfairfanfare.com/ftp-wordpress-%E6%9B%B4%E6%96%B0%E3%81%A7%E3%81%8D%E3%81%AA%E3%81%84/ 【Wordpress】更新できない時はSSH SFTP Updater SupportでSFTP化しよう - マカラボ - Macalab - https://macalab.net/wordpress/ssh-sftp-updater-support/ 自動でのアップデートを停止させる場合、以下を参考にする WordPressの自動更新(アップデート)を停止する | PLUGMIZE(プラグマイズ) https://plugmize.jp/archives/blog/20160707_update.html ■バージョンアップ(実際に行ったときのメモ) ダッシュボードに「WordPress 6.3 が利用可能です ! 今すぐ更新してください。」と表示されたら、WordPressのバージョンアップができる クリックすると「WordPress の更新」画面に遷移し、以下のようなメッセージが表示される
WordPress の新しいバージョンがあります。 重要: 更新する前に、データベースとファイルをバックアップしてください。更新のヘルプが必要な場合は、WordPressの更新のドキュメントページにアクセスしてください。 WordPress 6.0.1から WordPress 6.3-jaに手動更新できます: [バージョン 6.3-ja に更新] [この変更を非表示にする] WordPress 6.0.1から WordPress 6.3-en_USに手動更新できます: [バージョン 6.3-en_US に更新] 更新されている間、サイトはメンテナンスモードになります。更新が完了したら、このモードはすぐに解除されます。
「バージョン 6.3-ja に更新」ボタンをクリック 完了したら以下の画面が表示された(恐らく、データベースの更新が必要な場合にのみ表示される)
データベースの更新が必要です WordPress が更新されました。次に最後のステップとして、データベースを最新バージョンに更新する必要があります。 データベースの更新処理には少し時間がかかるかもしれません。しばらくお待ちください。 [WordPress データベースを更新]
データベースをバックアップしてから「WordPress データベースを更新」をクリックすると、すぐに完了した ■gitでの管理 WordPressをGitで管理 - Qiita https://qiita.com/refirio/items/942fad324d320577e2c0 ■設置し直す場合 稼働しているWordPressから、以下をバックアップしておく(その他、必要なファイルがあれば合わせてバックアップする) .htaccess wp-config.php WordPressのファイルをアップロードし直し、バックアップした上記ファイルを追加アップロードする 以降は通常通り操作できる ■サブディレクトリに設置してルートディレクトリでアクセスする 例えば /wp/ ディレクトリ内にWordPressを設置した場合、アクセスするURLは http://example.com/wp/ のようになる /wp/ ディレクトリ内に置いたまま http://example.com/ でアクセスしたい場合、通常の手順でWordPress設置後に以下の設定を行う 管理画面の「設定 → 一般」 「サイトアドレス (URL)」から末尾の「/wp」を削除する(「WordPress アドレス (URL)」はそのままにする) /wp/index.php を /index.php に複製する(移動ではなく複製する) 複製された /index.php を開き
require( dirname( __FILE__ ) . '/wp-blog-header.php' );
この部分を以下のように変更する
require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );
この時点で /index.php からアクセスできるが、 この時点ではカスタム投稿タイプのページや下層ページがエラーになることがあるみたい 管理画面の「設定 → パーマリンク設定」 何も変更せずに「変更を保存」を押す。これにより設定が更新される ※/.htaccess は自動で作成されたが、環境によっては作成されないかも その場合、/wp/.htaccess を複製して /.htaccess を作成し、ファイル内のパスを調整する これで http://example.com/wp/ に設置したWordPressに対して http://example.com/ でアクセスできる 管理画面のURLは http://example.com/wp/wp-login.php になる ※本文内で直接URLを書いて下層ページにリンクしている箇所があれば、その部分は手動での調整が必要 ただしsearchreplacedb2などで一括置換すると、メディアのURLも置換してしまうと思われるので注意 記事数によっては地道に手動で置換するほうが安全か(要検証) WordPress を専用ディレクトリに配置する - WordPress Codex 日本語版 https://wpdocs.osdn.jp/WordPress_%E3%82%92%E5%B0%82%E7%94%A8%E3%83%87%E3%82%A3%E3%83%AC%E3%82%AF%E3%... WordPressをドメイン直下のルートディレクトリへ移動する方法! | Cloud 9 Works https://www.cloud9works.net/web/how-to-change-wordpress-directory/ サブディレクトリ(/wp/)にインストールしたwordpressをドメイン直下に表示する方法【ルートディレクトリを変更】 | かわたま.net http://kawatama.net/web/974 「原則として /wp/ ディレクトリ内のみで構築し、本番公開時に /wp/index.php を /index.php に移す」 「プログラム自体は /wp/ に置いたままにしておく」 とすると 「トップに現行サイトがあっても構築を進められる」 「WordPressと色々なプログラムを併用する場合、ディレクトリが明確に分かれて管理しやすい」 となっていいかも。強引な手法ではなく公式に紹介されている手順なので、安心感もある (index.php など一部を除いてプレフィックス wp- が付いているので、デフォルトのままでも混乱は無さそうだが) ■データの移行 ※以下の手順はPHP5時代に searchreplacedb2 を試したもの searchreplacedb2 はPHP7環境では動作しない 新しいバージョンはあるようだが未検証 searchreplacedb2 を使って、データベース内のURLを置換できる 直接書き換えるのは、データが壊れる可能性があるため非推奨 【決定版】WordPressの引っ越し!サーバー移行・移転手順 | FASTCODING BLOG https://fastcoding.jp/blog/all/system/moving-wordpress/ WordPress移行時にURLをSQLで直接一括置換はダメ! 「Search and Replace for WordPress Databases Script」を使おう | infoScoop開発者ブログ https://www.infoscoop.org/blogjp/2014/08/14/use-search-and-replace-for-wordpress-when-moving/ URLは例えば以下のように指定して置換する http://refirio.example.comhttps://refirio.net WordPressでは一部のデータをシリアライズして保持しているが、シリアライズされたデータは以下のようになる 「13」という数値は「administrator」の文字数。このように文字の長さを保持している箇所がある 不用意にURLを書き換えるとデータの長さが変わり、正しく参照できなくなる可能性がある
a:1:{s:13:"administrator";b:1;}
■RSSの配信 例えば http://example.com/ にWordPressを設置した場合、 http://example.com/feed/ にアクセスするとRSSを取得できる (WordPressの設定によっては http://example.com/?feed=rss2 でアクセスする) また、カテゴリのスラッグなどから絞り込んで取得することもできる 以下、スラッグ「pickup」と「column」を取得する例 http://example.com/category/pickup/feed/ http://example.com/category/column/feed/ WordPressのカテゴリー別RSS Feedは簡単だった http://blog.eb-de.com/2010/09/19/wp-category-rss/ ■続きを読む 標準機能で「続きを読む」を表示する機能がある テーマ内では、以下の命令を使えばそれぞれの内容を取得できる
// 記事の全文を取得 the_content(); // 記事の後半のみを取得 the_content('', true); // 記事の前半のみを取得 global $more; // グローバル変数 $more を宣言(ループの前に) $more = 0; // more タグまでのみを表示するようにセット(ループの中で) the_content('');
「続きを読む」を使ってトップページに記事が表示された時に本文の一部だけを表示する - WordPressの使い方 https://www.adminweb.jp/wordpress/editor/index5.html テンプレートタグ/the content - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_... 「続きを読む」のカスタマイズ - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%80%8C%E7%B6%9A%E3%81%8D%E3%82%92%E8%AA%AD%E3%82%80%E3%80%8D%E3%81%AE%E3%8... ■ピックアップ記事 専用のプラグインを使わなくても、以下の方法で何とかなりそう 【WordPress】5分でブログのホームにピックアップ記事を表示させる方法 | たむらんち http://www.tamura.tottori.jp/2015/10/02/wordpress-easy-pickup-post/ ■その他メモ 【コピペで使える】WordPressチートシート 2020 - More Web https://more-field.co.jp/web/wordpress-cheatsheet/ Webクリエイターボックス | WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 https://www.webcreatorbox.com/ ねんでぶろぐ https://nendeb.com/
■カスタマイズ(基本)
■コーディング規約 WordPress コーディング規約 - Japanese Team https://ja.wordpress.org/team/handbook/coding-standards/wordpress-coding-standards/ ■一からテーマを作成する 以下などを参考にする 最低限のものを作るのは難しくないが、汎用的なものを作るのはそれなりに手間がかかる WordPressのテーマを自分で作成してみたら意外と簡単だった!|wp.geek https://wpmake.jp/contents/theme/theme_create/ WordPressのテーマを作る羽目になったWebエンジニアへ https://zenn.dev/antez/articles/8e576daf822a84 ■雛形用のシンプルなテーマ 以下などのテーマを導入して雛形とし、カスタマイズするといい テーマが入ったディレクトリを /wp-content/themes 内にアップロードするだけで認識される (管理画面から直接インストールするなど、他の方法でのインストールも可) SoSimple - Free WordPress Themes https://wordpress.org/themes/sosimple/ インストールすると、テーマ管理画面に「Good Day, this is the SoSimple theme creator fervillz.」のようなメッセージが表示される これは /wp-content/themes/sosimple/functions.php の215行目あたりにある、以下の部分をコメントアウトすると非表示にできる
add_action( 'admin_notices', 'sosimple_admin_notice__success' );
カスタマイズ前に、案件に合わせた名前に変更しておくといい /wp-content/themes/sosimple のディレクトリ名を変更し、 /wp-content/themes/sosimple/style.css 内にあるテーマ情報も変更する 最低限これだけで大丈夫だが、テーマ内に「@package SoSimple」などが書かれているので、必要に応じて調整する 以下に自分用に作ったシンプルな汎用テーマがある 「Simple」というテーマ名は案件用に置換して使うといい Ver5でも使用できた http://refirio.org/memos/wordpress/themes/simple.zip なおテーマを作成する際、header.php には wp_head() を、footer.php には wp_footer() を書いておくことを推奨 WordPressが自動出力する諸々のコードは、この関数の場所に挿入される wp_head();とwp_footer();とはいったい何なのか | ゼロイチブログ https://meshikui.com/2018/08/10/586/ ■子テーマ あるテーマをベースとし、独自に機能を拡張する仕組み 既存テーマを直接カスタマイズすると、自動更新の際にカスタマイズ内容がリセットされてしまう可能性がある 子テーマを使えば、親となるテーマが自動更新されても独自の拡張内容が消えない 子テーマを作ってWordPressの既存テーマをカスタマイズする方法 | Webクリエイターボックス https://www.webcreatorbox.com/tech/wordpress-child-theme ■一から子テーマを作成する 自作テーマのディレクトリ名が公式テーマのディレクトリ名と偶然重複すると、自作テーマが自動更新の対象にされてしまう つまり、突然テーマが上書き削除される可能性がある これを防ぐために、使用するテーマは常に子テーマ化しておくという手はある (とは言え、子テーマは親テーマの影響を受けるため、自動更新による変更を完全に防げるわけではない 仕事で一からテーマを作成するなら、既存のテーマと重複しないディレクトリ名を付けるくらいで十分と思われる それでも心配なら、自作テーマは自動更新する必要が無いので、テーマの自動更新を無効にしておけばいい。が、デフォルトで無効になっている) 最低限、親テーマとして以下のファイルを作成し、 /wp-content/themes/sample/index.php
<?php
/wp-content/themes/sample/style.css
/* Theme Name: Sample Author: refirio Author URI: http://refirio.net/ Description: Simple theme for simple websites. Version: 1.0.0 */
子テーマとして以下のファイルを作成すれば機能する あとは子テーマの内容のみを編集していく /wp-content/themes/sample-child/functions.php
<?php add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style')); }
/wp-content/themes/sample-child/style.css
/* Theme Name: Sample Child Template: sample Author: refirio Author URI: http://refirio.net/ Description: Simple theme for simple websites. Version: 1.0.0 */
子テーマを作成する際、カレントディレクトリの扱いが変わるので注意 「get_template_directory」があれば「get_stylesheet_directory」に置換することにより、最低限動作するはず WordPress 子テーマがカレントのときのテンプレートディレクトリの取得 - MT Systems http://web.mt-systems.jp/archives/703 ■トップページを作成する 「設定 → 表示設定 → ホームページの表示」 から、特定の固定ページをトップページとして表示できる WordPressで固定ページをトップページに指定する方法 https://wp-exp.com/blog/page-top/ もしくは home.php を作ると、トップページ用のファイルとして扱われる (その場合 index.php は記事一覧に使われる) WordPress Ver3 以降は front-page.php も使用できるようになった home.php と同じ用に扱えるが、表示設定の「フロントページ」で何を選択していても影響を受けないという特徴がある ざっくりWordPressの自作テンプレートの作り方 - Qiita https://qiita.com/kazukichi/items/5126a4fd259d374e99ae テンプレート階層 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4#.E3.... front-page.phpとhome.phpとindex.phpの関係 | 西沢直木のIT講座 https://www.nishi2002.com/21237.html WordPressで困惑しがちなindex.phpとhome.phpとfront-page.phpの違い - Kowappa https://kowappa.com/30 ■固定ページに投稿一覧を表示する 固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】 | クラウドット株式会社 http://web.archive.org/web/20180624065120/https://www.cloudot.co.jp/blog/2444/ 固定ページに投稿記事一覧を表示する【Wordpressテンプレートタグ】 | arutega | アルテガ https://arutega.jp/wordpress-tips01/ ■固定ページごとのテンプレートを用意する 例えば http://example.com/ にWordPressを設置しているとして http://example.com/sample/ というページを作成した場合、 テーマとして page-sample.php を作成するとページ専用テンプレートとして扱われる 基本的にはこの方法で固定ページを作成していけばいいが、コンテンツはできるだけWordPressのエディタで編集できるようにする方が管理しやすい (PHP側にコンテンツを記述すると、更新にFTPが必要になってしまう ただしWordPressのエディタ側でコンテンツを記述すると、git管理できないので一長一短 後者でプログラムを扱いたい場合、ショートコードの結果を埋め込むようにすればいい) また、例えば page-contact.php を作成して以下の内容を記述する
<?php /* Template Name: お問合わせページ */ ?>
そうすると、ページ作成の際に「固定ページの属性」の「テンプレート」からこのファイルを選択できるようになる 汎用的なページテンプレートを作成する場合、この方法が利用できる 固定ページのテンプレートを変更する方法【WordPress】 https://webnetamemo.com/coding/wordpress/20150628397 テンプレート階層 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4#.E5.... 以下は固定ページとしてHTML込みで投稿する場合の、汎用的なテーマの例(page.php)
<?php get_header(); ?> <?php while ( have_posts() ) : the_post(); ?> <?php remove_filter( 'the_content', 'wpautop' ); ?> <?php the_content(); ?> <?php if ( comments_open() || get_comments_number() ) : ?> <section class="column"> <div class="inner"> <?php comments_template(); ?> </div><!-- /.inner --> </section> <?php endif ?> <?php endwhile; ?> <?php /* get_sidebar(); */ ?> <?php get_footer(); ?>
■記事ごとのテンプレートを用意する 例えば single-shop-test.php を作成して以下の内容を記述する
<?php /* Template Name: テスト記事 Template Post Type: post,news */ ?>
そうすると、記事作成の際に「投稿の属性」の「テンプレート」からこのファイルを選択できるようになる 投稿ページのテンプレートを変更する方法【WordPress】 https://webnetamemo.com/coding/wordpress/201712026347 ■自動挿入されるpタグを削除する このようにして本文を表示している箇所を
<?php the_content(); ?>
以下のように変更する(「remove_filter」を追加する)
<?php remove_filter( 'the_content', 'wpautop' ); ?> <?php the_content(); ?>
wordpressに自動挿入されるPタグを削除する3つの方法 http://hikarika.jp/ptagusakujo/ ■エディタの段落・見出しセレクトボックスの内容を調整する WordPressのビジュアルエディタの段落・見出しセレクトボックスの内容を変更する方法 https://xov.jp/e/343/ 以下のように、「見出し1を選択したら h3 が使われる」のような変更も可能
function my_tiny_mce_before_init( $ar ) { $ar['block_formats'] = '段落=p;見出し1=h3;見出し2=h4;見出し3=h5;'; return $ar; } add_filter( 'tiny_mce_before_init', 'my_tiny_mce_before_init' );
■ビジュアルエディタを無効にする HTML込みで固定ページを作成させる場合など、ビジュアルエディタは無効にしておく方が無難 有効に切り替えて投稿すると、必要なHTMLタグが削除されてしまう可能性がある 特定の投稿タイプのみ、ビジュアルエディタを無効にすることもできる WordPressの記事編集時にビジュアルエディタを使えないようにする方法 | TechMemo http://techmemo.biz/wordpress/disable-visual-editor/ ■リビジョンを有効にする デフォルト状態で有効になっているはず 公開ボタン部分に表示されない場合は何度か投稿してみる(1度だけの投稿だと表示されない) 「表示オプション」にある「リビジョン」にチェックを入れると、詳細な履歴が表示されるようになる ■サイトのURLを取得する 以下のようにすれば、サイトのURLを取得できる
$url = home_url();
以下のようにすれば、最後にスラッシュを付けた状態でサイトのURLを取得できる
$url = home_url( '/' );
サイトのURLを取得・出力する | The WordPress Press https://thewppress.com/libraries/get-home-url/ ■ショートコード 投稿・固定ページ・テーマで、特定の文字列を書くことで特定の内容を挿入できる この仕組をショートコードと呼ぶが、これは自分で追加することができる (プログラムは functions.php に閉じ込め、原則としてテーマからはショートコードを呼ぶ…とすると場合によってはメンテナンスしやすいかも) WordPressのURLをショートコードにしておく - y.o.designers-works http://yuji-okayama-designersworks.com/wordpress/871/ functions.php に、一例だが以下の内容を記述する
/** * ホームのURLを取得(ショートコード) */ function shortcode_home_url() { return home_url( '/' ); } add_shortcode( 'home_url', 'shortcode_home_url' ); /** * テーマのURLを取得(ショートコード) */ function shortcode_theme_url() { return get_template_directory_uri() . '/'; } add_shortcode( 'theme_url', 'shortcode_theme_url' ); /** * 投稿一覧を取得(ショートコード) */ function shortcode_post_list() { $paged = get_query_var('paged'); $args = array( 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'post', 'post_status' => 'publish' ); $the_query = new WP_Query($args); ob_start(); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <li class="hover"> <a href="<?php the_permalink() ?>" class="hover100"> <div class="img_box"> <?php the_post_thumbnail( 'thumbnail' ); ?> </div> <div class="text_box"> <div class="entry_info_box"> <span class="entry-date"><?php the_time( 'Y.m.d' ); ?></span> <span class="entry-title"><?php the_title(); ?></span> </div> <div class="entry_content_box"> <?php echo strip_tags( mb_substr( get_the_content(), 0, 30 ) ); ?> </div> </div> </a></li> <?php } } wp_reset_postdata(); $contents = ob_get_contents(); ob_end_clean(); return $contents; } add_shortcode( 'post_list', 'shortcode_post_list' );
投稿内では、以下のコードで呼び出すことができる [home_url] ... ホームのURLを取得 [theme_url] ... テーマのURLを取得 [post_list] ... 投稿一覧を取得 テーマ内では、以下のコードで呼び出すことができる <?php echo do_shortcode( '[home_url]' ); ?> ... ホームのURLを取得 <?php echo do_shortcode( '[theme_url]' ); ?> ... テーマのURLを取得 <?php echo do_shortcode( '[post_list]' ); ?> ... 投稿一覧を取得 以下のようにすれば、ショートコードに引数を渡すこともできる WordPressのショートコードの引数の使い方 | ホワイトベアー株式会社 https://whitebear-seo.com/wordpress-shortcode-parameter/ ■カスタム投稿タイプ 異なるタイプのコンテンツを管理できる function.php にコードを追加することで設定できる。以下は追加例
/** * カスタム投稿タイプ */ function create_post_type() { // コラム register_post_type( 'column', array( 'labels' => array( // ラベル 'name' => 'コラム', 'singular_name' => 'コラム', 'add_new' => '新規追加', 'add_new_item' => '新規コラムを追加', 'edit_item' => 'コラムの編集', 'new_item' => '新規コラムを追加', 'search_items' => 'コラムを検索', 'view_item' => 'コラムを表示', ), 'public' => true, // 投稿タイプをパブリックにするか 'has_archive' => true, // アーカイブを有効にするか 'supports' => array( 'title', // 記事タイトル 'editor', // 記事本文 'comments', // コメント 'thumbnail' // サムネイル ), 'menu_icon' => 'dashicons-edit', // メニューアイコン 'publicly_queryable' => true, 'rewrite' => true, ) ); add_post_type_support( 'column', 'revisions' ); // リビジョンに対応させる場合 // コラムカテゴリー register_taxonomy( 'column-cat', array( 'column' ), array( 'label' => 'カテゴリー', //表示名 'show_ui' => true, //管理画面に表示するか 'show_admin_column' => true, //管理画面の一覧に表示するか 'show_in_nav_menus' => true, //カスタムメニューの作成画面で表示するか 'hierarchical' => true, //階層構造を持たせるか(持たせるとカテゴリー扱い) ) ); } add_action( 'init', 'create_post_type' );
https://qiita.com/kazukichi/items/5126a4fd259d374e99ae の内容を参考に、項目やコメントを追加したい 上のように作成したカスタム投稿タイプの記事を表示する場合、 archive.php single.php を複製して archive-column.php single-column.php を作成する。「column」には register_post_type の第一引数で渡したものを指定する 作成したファイルが認識されない場合、いったん別のテーマに切り替えてから再度戻すと認識されることがある カスタム投稿タイプのカテゴリは、タクソノミーを使って作られている。よってカテゴリでの検索結果は taxonomy.php を作成する。タクソノミー用のテンプレートを作成して…という流れになる taxonomy-xxx.php のようなファイル名で、タクソノミーごとにテンプレートを作成することもできる 例えば都道府県として pref というカテゴリを設定した場合、taxonomy-pref.php というファイルを作成すれば都道府県の検索結果ページとして使用される ただし、 「コラムとイベント情報の両方に都道府県を設定する」 「コラムを都道府県で検索するページは必要だが、イベントの場合は不要」 という場合、上のページを作成することによってコラムでも都道府県での検索ページが表示されてしまうので注意 column-pref のような名前で別々にタクソノミーを作るか、taxonomy-pref.php 内でURLを判定して「コラムでなければ404を返す」の処理を入れるなど対応が必要そう http://www.example.com/wordpress/ にWordPressを設置した場合、カスタム投稿タイプのURLは以下のようになる http://www.example.com/wordpress/column/ http://www.example.com/wordpress/column/%E3%83%86%E3%82%B9%E3%83%88/ Wordpress カスタム投稿タイプの作り方 - Qiita https://qiita.com/nagasawaaaa/items/9501c0a2e544d85ee78d WordPressのカスタム投稿タイプでメンバー紹介ページを作成 | Webクリエイターボックス https://www.webcreatorbox.com/tech/custom-post-type Function Reference/register post type - WordPress Codex https://codex.wordpress.org/Function_Reference/register_post_type タクソノミーテンプレート - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%82%BF%E3%82%AF%E3%82%BD%E3%83%8E%E3%83%9F%E3%83%BC%E3%83%86%E3%83%B3%E3%8... プラグインを使ってカスタム投稿タイプの設定を行うこともできる(未検証) 【Custom Post Type UIの使い方】カスタム投稿作成プラグインCPT UI - WEBST8のブログ https://webst8.com/blog/wordpress-custom-post-type-ui/ ■カスタム投稿タイプのURLを変更 カスタム投稿タイプのURLを変更する場合、Custom Post Type Permalinks プラグインを使うといい …らしいが、導入しても何故かURLが変わらなかった? カテゴリ一覧とタグ一覧ページ以外のURLはおかしなものではないので、導入しなくても大丈夫かも カスタム投稿タイプのパーマリンクをカスタム設定できるWordPressプラグイン・Custom Post Type Permalinks | かちびと.net http://kachibito.net/wordpress/plugin/custom-post-type-permalinks.html Custom Post Type Permalinksを使ってみる | cly7796.net http://cly7796.net/wp/cms/try-using-custom-post-type-permalinks/ ■カスタム投稿タイプでカテゴリやタグを有効にする register_taxonomy や register_taxonomy_for_object_type 関数でカテゴリやタグを有効にできる 一例として「column」というカスタム投稿タイプがある場合、以下のようにする
// 保険コラムカテゴリー register_taxonomy( 'column-cat', array( 'column' ), array( 'label' => 'カテゴリー', // 表示名 'show_ui' => true, // 管理画面に表示するか 'show_admin_column' => true, // 管理画面の一覧に表示するか 'show_in_nav_menus' => true, // カスタムメニューの作成画面で表示するか 'hierarchical' => true, // 階層構造を持たせるか(持たせるとカテゴリー扱い) ) ); // 保険コラムタグ register_taxonomy_for_object_type( 'post_tag', 'column' );
【wordpress】カスタム投稿タイプにカテゴリ&タグ追加しアーカイブページで表示 | クリエイトブック https://createsbook.com/wordpress/category-tag-archive/ WordPress カスタム投稿タイプ カスタム分類/ Web Design Leaves https://www.webdesignleaves.com/pr/wp/wp_custom_post_type.html タグをもとに検索する場合、 get_posts に対して例えば「'tag' => 'テスト'」のように値を渡すと、タグ「テスト」で検索できる get_posts に対して例えば「'tag_id' => 191」のようにタグのIDを渡すことでも検索できる また pre_get_posts で処理する場合、 「$query->set( 'tag', 'テスト' );」「$query->set( 'tag_id', '191' );」で絞り込みの指定ができる 【WordPress】特定のタグで絞り込んだ記事の一覧を表示させる方法 - よしあかつき https://yosiakatsuki.net/blog/get-posts-tag/ カスタム投稿タイプのカテゴリとタグについては、以下の挙動になる カテゴリは独立しているが、タグは共通で参照されるようなので注意 ・通常の投稿(post)があり、カスタム投稿タイプとしてコラム(column)を追加したとする ・投稿(post)に対してカテゴリを登録すると、投稿(post)からのみ選択できるようになる ・コラム(column)に対してカテゴリを登録すると、コラム(column)からのみ選択できるようになる ・投稿(post)に対してタグを登録すると、投稿(post)とコラム(column)の両方から選択できるようになる ・コラム(column)に対してタグを登録すると、投稿(post)とコラム(column)の両方から選択できるようになる ・タグによる検索結果は別々のものになるが、検索処理の実装内容次第ではある ■カスタム投稿タイプでリビジョンを有効にする カスタム投稿タイプは、標準ではリビジョンが無効になっている 明示的に有効にする必要がある カスタム投稿でリビジョンを使えるようにする | Koeda Blog https://ko-e-da.com/131 ■カスタムフィールドの日時で絞り込み表示 【pre_get_posts】カスタムフィールドに入力した日付で今日以降の記事を表示 - Brushape http://brushape.com/wordpress/%E3%80%90pre_get_posts%E3%80%91%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3... meta_queryパラメータについて - ハックノート https://hacknote.jp/archives/46442/ 以下は記述例。function.php で pre_get_posts に対して処理する想定。 (イベント終了日が2018年4月30日以降の記事を表示)
$query->set('meta_query', array( array( 'key' => 'event-end', 'value' => '18/04/30', 'compare' => '>=', 'type' => 'DATE' ) ) );
■記事一覧を取得する(カスタム投稿タイプにも対応) 一例だが、以下のコードで投稿一覧を取得できる 検索条件の指定は、後述する function.php での pre_get_posts の利用も検討する(恐らくそちらの方が推奨される方法) the_field を使用すれば、カスタムフィールドの情報も取得できる
<ul> <?php $paged = get_query_var('paged'); $args = array( 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'post', 'post_status' => 'publish' ); $the_query = new WP_Query($args); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <li><a href="<?php the_permalink() ?>"> <?php the_time( 'Y.m.d' ); ?> ... <?php the_title(); ?> [<?php the_field( 'icon' ) ?>] [<?php the_field( 'introduction' ) ?>] </a></li> <?php } } wp_reset_postdata(); ?> </ul>
例えば 「'post_type' => 'post',」 の部分を 「'post_type' => 'column',」 とすると、カスタム投稿タイプが「column」の記事を取得できる 上のコードはごく一般的なものだが、可能なら後述の「記事一覧に表示する内容を制御する」の方法が好ましい このコードのように WP_Query で取得する他にも、get_posts で取得する方法もある get_posts は WP_Query のラッパー関数 ただし、 「前者はデータを配列として扱い、後者はオブジェクトとして扱う」 「使えるパラーメーターが異なる」 など差はある ここまで違う!WordPressの[WP_Query]と[get_posts()]の特性を暴いてみる | 東京上野のWeb制作会社LIG https://liginc.co.jp/348970 ■記事一覧から検索して取得する(カスタム投稿タイプにも対応) 以下のようにすると、カスタムフィールドの値をもとに検索できる
$args = array( 'post_type' => 'staff', 'meta_query' => array( 'key' => 'staff_code', 'value' => 'XXX', 'compare' => '=', ) ); $the_query = new WP_Query( $args );
引き続き詳細な挙動を検証したい meta_queryパラメータについて - ハックノート https://hacknote.jp/archives/46442/ WordPressでカスタムフィールドの値をサイト内検索の対象にする方法(プラグインなし) https://www.webernote.net/wordpress/custom-fields-search.html WP_Queryを使って絞り込み検索するのにコレは便利! - シンプルシンプルデザイン WordPress https://simplesimples.com/web/application/wordpress/wp_query%E3%81%AE%E5%BC%95%E6%95%B0%E3%81%AB%E3%... 未検証だが以下も参考になりそう [WordPress] カスタムフィールドで絞り込んで一覧表示する | IT女子のお気に入りフォルダ https://sachips.byeto.jp/wordpress/wp-customfield-wpquery.html query_posts(WP_Queryクラス)でカスタムフィールドを使う - WordPress私的マニュアル https://elearn.jp/wpman/column/c20110915_01.html ■記事の種類を判定する is_home()、is_single()、is_page()、is_singular('post_type') といった関数を使用することにより、記事の種類で処理を分岐できる WordPress 条件分岐一覧 投稿/固定/カテゴリ/カスタム投稿 | なんとなくWEBで食べていく https://www.nowte.net/wordpress/wordpress-conditional-tag/ ■非公開の記事を取得する 記事を取得する際、post_statusを「any」にすることで、公開状態に関わらず記事を取得できる ただし下書き状態の記事は、ログインしているユーザに対してのみ表示されるので注意
'post_status' => 'publish', ↓ 'post_status' => 'any',
ログインしていないユーザにも表示したい場合、以下のようにする
'post_status' => 'publish', ↓ 'post_status' => array('any', 'private'),
いっつも忘れるWP_Queryの使用方法とパラメータ一覧。がっつり整理してみた | WEMO https://wemo.tech/160 これは便利!WordPressのWP_Queryでよく使うコードスニペット | それからデザイン スタッフブログ https://sole-color-blog.com/blog/265/ WP_Queryの「post_status=any」は「trash」と「auto-draft」を含まないようです。 | Online Inc. https://www.online-inc.jp/archives/931 ■記事一覧に表示する内容を制御する function.php で pre_get_postsをフックして、一覧に表示する内容を変更できる 前述の「記事一覧を取得する」よりも推奨される方法とされている 「ホームなら」「アーカイブページなら」「カスタム投稿タイプが○○なら」 のような条件を指定して制御できる 【wordpress】pre_get_postsを使ってみませんか? - Qiita https://qiita.com/_ruka_/items/e14280d34eddf49efad1 wordpressで表示する記事数をしぼる方法 | web関連 | 二色人日記。 https://twotone.me/web/1892/ 以下は上記解説ページからのコード例
function change_posts_per_page($query) { // 管理画面、メインクエリに干渉しないために必須 if ( is_admin() || ! $query->is_main_query() ){ return; } // カテゴリーページの表示件数を5件にする if ( $query->is_category() ) { $query->set( 'posts_per_page', '5' ); return; } } add_action( 'pre_get_posts', 'change_posts_per_page' );
またquery_varsをフックしてカスタムクエリを追加することにより、 通常検索対象にならない項目で検索することもできる 【WordPress】カスタムクエリの追加方法と一緒に追加しておきたい関数やフックなど | Wood-Roots:blog https://wood-roots.com/web/wordpress/1362 ■改ページを自作する 一例だが以下の関数を作成しておき、
function get_pagination($max_pages = '', $paged, $range = 2) { $showitems = $range + 1; if (empty($paged)) { $paged = 1; } if (empty($max_pages)) { $max_pages = 1; } $html = ''; if (1 != $max_pages) { $html .= '<div class="pager">'; for ($i = 1; $i <= $max_pages; $i++) { if (1 != $max_pages && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $max_pages <= $showitems)) { $html .= ($paged == $i) ? '<span>' . $i . '</span>' : '<a href="' . get_pagenum_link($i) . '">' . $i . '</a>'; } } $html .= '</div>'; } return $html; }
改ページを表示したい箇所で以下のように指定する (記事の一覧表示部分は別途作成されているものとする)
$paged = get_query_var('paged'); $args['posts_per_page'] = -1; echo get_pagination(ceil(count(get_posts($args)) / $posts_per_page), $paged);
[WordPress]get_postsを使って自作のページネーションを実装する | カバの樹 https://www.kabanoki.net/67/ ■カテゴリ一覧を取得する WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする | Web技術Tips | ホームページ制作のDOE【横浜】 〜手を抜かず最大のパフォーマンス〜 https://www.doe.co.jp/hp-tips/wordpress/get_categories%E3%81%A7%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%... ■カスタム投稿タイプのカテゴリ一覧(タクソノミー一覧)を取得する 一例だが以下のようにすると、「column-cat」の一覧を取得できる
<?php $categories = get_terms( 'column-cat', 'hide_empty=0' ); ?> <ul> <?php foreach ($categories as $category) : ?> <li><a href="<?php echo do_shortcode( '[home_url]' ); ?>/column-cat/<?php echo $category->slug ?>/"><?php echo $category->name ?></a></li> <?php endforeach; ?> </ul>
■カスタム投稿タイプのカテゴリ情報(タクソノミー情報)を取得する 一例だが以下のようにすると、カテゴリ名と各種詳細情報を取得できる
<?php single_term_title(); ?> <?php $queried_object = get_queried_object(); // タイトル $term_title = $queried_object->name; // ディスクリプション $term_description = $queried_object->description; // スラッグ $term_slug = $queried_object->slug; // ID $term_id = $queried_object->term_id; echo '[' . $term_title . ']'; echo '[' . $term_description . ']'; echo '[' . $term_slug . ']'; echo '[' . $term_id . ']'; ?>
WordPress:タームのアーカイブページで、タイトルやスラッグなどの各種情報を取得・表示する方法 | NxWorld https://www.nxworld.net/wordpress/wp-get-and-display-various-information-on-term-archive-page.html ■カテゴリを複数選択できないようにする カスタマイズで対応できそうだが要検証 WordPressのカテゴリー選択を1つに制限する方法 | Bamboo Works(バンブーワークス) https://bambooworks.co/wordpress-category-select-only-one/ WordPressの投稿でカテゴリーを1つしか選択できないようにする方法 | TechMemo https://techmemo.biz/wordpress/limit-category-select/ ■カテゴリの並び替え 標準機能では並び替えできないので、Category Order and Taxonomy Terms Order プラグインを使う カテゴリーの表示順を並び替えるプラグイン - WordPress超初心者講座 https://wp-exp.com/blog/category-order/ Category Order and Taxonomy Terms Order - WordPress プラグイン https://ja.wordpress.org/plugins/taxonomy-terms-order/ ■記事一覧とカテゴリを表示する
$the_query = get_posts( array( 'post_type' => 'post', 'posts_per_page' => -1, ) ); if ( $the_query ) { foreach ( $the_query as $post ) { echo '<p>'; echo $post->post_title . '<br>'; $categories = get_the_terms( $post, 'category' ); if ( $categories ) { foreach ( $categories as $category ) { if ( $category->parent != 0 ) { echo $category->name . '<br>'; } } } echo '</p>'; } }
WordPressで種類が多くて混乱するタクソノミーやタームを表示するときの関数のまとめ | それからデザイン スタッフブログ https://sole-color-blog.com/blog/488/ ■カテゴリを取得できない場合 例えば functions.php に以下を記述して
print('<pre>'); print_r(get_terms('pref', array('get' => 'all'))); print('</pre>');
以下のようなエラーになった場合、
WP_Error Object ( [errors] => Array ( [invalid_taxonomy] => Array ( [0] => 不正なタクソノミー分類です。 ) ) [error_data] => Array ( ) )
以下で解説されているように、タクソノミーが未定義のタイミングで検索しようとしている可能性がある invalid taxonomy など | technopolis https://technopolis.fun/wordpress/686/ タクソノミーの定義は通常「init」のタイミングで行うので、以下のように「init」内で処理するようにすると解消される可能性がある
function get_prefs() { print('<pre>'); print_r(get_terms('pref', array('get' => 'all'))); print('</pre>'); } add_action( 'init', 'get_prefs' );
それでも実行されない場合、アクションフックの実行順序が影響している可能性がある 以下で解説されているように、必要に応じて実行順を指定する (もしくは、タクソノミーの定義を行っている箇所の直後に処理を記述する) できる!WordPressカスタマイズ #04 アクションフックを使ったカスタマイズに挑戦! | 株式会社ベクトル https://www.vektor-inc.co.jp/post/wordpress-about-action-hook/ ■カテゴリで絞り込み表示する get_posts に category や category_name を渡して絞り込める
$args = array( 'category' => '', 'category_name' => '',
テンプレートタグ/get posts - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_... ■カテゴリで絞り込み表示する(カスタム投稿タイプ) get_posts に tax_query を渡して絞り込める カスタム投稿の場合、カテゴリ(category)ではなくタクソノミー(taxonomy)での扱いとなるので注意
$args = array( 'tax_query' => array( array( 'taxonomy' => 'genre', 'field' => 'slug', 'terms' => 'jazz' ) ) );
テンプレートタグ/get posts - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_... ■特定のカテゴリ除外して表示する(カスタム投稿タイプ) operator で「NOT IN」を指定すれば、条件を変更できる
$args = array( 'tax_query' => array( array( 'taxonomy' => 'genre', 'field' => 'slug', 'terms' => 'jazz' 'operator' => 'NOT IN', ) ) );
メインループで出力される投稿一覧から、特定のカテゴリー・タグ・タクソノミーに属する記事を除く | The WordPress Press https://thewppress.com/libraries/exclude-some-posts-that-belong-to-specific-taxonomies/ ■特定の記事を除外して表示する get_posts に exclude を渡して除外できる
$post_id = get_the_ID(); $args = array( 'exclude' => $post_id, );
get_postsで現在閲覧中の記事を除外して記事一覧を取得する | AkeCre https://www.akecre.com/wordpress/exclude_post/ ■記事をランダムに表示する get_posts に orderby で rand を渡すとランダム表示になる
$post_id = get_the_ID(); $args = array( 'orderby' => 'rand', );
【WordPress】記事をランダムに表示させる方法!プラグイン不要! | FASTCODING BLOG https://fastcoding.jp/blog/all/system/wordpress-random/ ■日時をフォーマットして表示 the_date() は、同じ日に複数の記事がある場合は一度しか出力されないことに注意 the_time() だと毎回表示してくれる 引数としてフォーマットを渡すことができるが、 原則として「the_time( get_option( 'date_format' ) );」という指定にし、WordPressの設定を反映させる方がいいかも テンプレートタグ/the date - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_... テンプレートタグ/the time - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/the_... WordPressでthe_dateタグは同日だと表示されない | 株式会社LIG https://liginc.co.jp/designer/archives/2266 ■アイキャッチ画像を表示 新着情報にサムネイルを表示したい…のような場合に使える WordPressのアイキャッチ画像の設定方法 | Web’Notes http://webnonotes.com/wordpress/eyecatch/ ■WebP形式の画像を扱う ※最新バージョンのWordPressなら、この調整は不要のはず functions.php に以下を追加する
/* * Webp画像のアップロードを許可 * 以下を参考に対応した * https://wordpress.vogue.tokyo/wordpress-webp/ */ function add_file_types_to_uploads( $mimes ) { $mimes['webp'] = 'image/webp'; return $mimes; } add_filter( 'upload_mimes', 'add_file_types_to_uploads' ); /* * Webp画像のサムネイルを表示 * 以下を参考に対応した(さらに追加で調整した) * https://ulcoder.com/wp-upload-webp/ */ function enable_webp_thumbnail ($result, $path) { if ($result === true) return $result; if (preg_match('/\.webp$/', $path)) { $result = true; } return $result; } add_filter( 'file_is_displayable_image', 'enable_webp_thumbnail', 10, 2 );
以下の記事を参考にしたが、コード内にある「IMAGETYPE_WEBP」はPHP7.1以降で利用できる定数 より多くの環境で動作するように、上記のコードでは拡張子からの判定に変更している WordPressに WebP ファイルをアップロードする方法 - WordPress を簡単に https://wordpress.vogue.tokyo/wordpress-webp/ WordPressにWebPをアップロードできない・サムネイルが表示されないとき | WEBLOGライナー https://ulcoder.com/wp-upload-webp/ ■入力項目の追加 カスタムフィールドで値を追加できる Advanced Custom Fields を使えば、専用画面で項目を管理できる Pro版なら、繰り返しフィールドに対応していたりと、より高機能になっている 初心者必見!WordPressで便利なカスタムフィールドとは?設定する手順とプラグインもまとめて紹介|ferret [フェレット] https://ferret-plus.com/8047 Advanced Custom Fieldsの使い方ープラグイン | TechAcademyマガジン https://techacademy.jp/magazine/7640 Advanced Custom Fieldsを更に使いやすく!ACF Proを選ぶ理由と機能紹介 | KERENOR { ケレンオール } http://www.kerenor.jp/acf-pro-introduction/ 無料版Advanced Custom Fieldsから有料版ACF Proへアップグレード/インストールする方法 | KERENOR { ケレンオール } http://www.kerenor.jp/upgrade-to-acf-pro/ Advanced Custom Fieldsの全フィールドタイプを徹底解説 https://bazubu.com/advanced-custom-fields-36452.html カスタムフィールドとして追加した値は、テーマ側に以下のようなコードを追加すれば表示できる
<?php the_field( 'test1' ); ?> <?php the_field( 'test2' ); ?>
もしくは、以下のようにしても表示できる
<?php echo get_field( 'test1' ); ?> <?php echo get_field( 'test2' ); ?>
Advanced Custom Fieldsの出力 http://kotori-blog.com/wordpress/acf_output/ Advanced Custom Fields で追加した項目は、標準ではプレビューの対象にならないので注意 以下のコードで対応できる [WordPress]カスタムフィールドの値もプレビューする - Qiita https://qiita.com/ki6ool/items/5a13197fbe3c29dc10de 以下だけでも対応できるかも?未検証 カスタム投稿タイプでAdvanced Custom Fields(ACF)のプレビューが動作しない - ほめぶろ https://homeblo.net/cptui-acf-preview-not-working/ Custom Field Suiteというものも使われるようになってきているらしい Advanced Custom Fieldsの有料版にしか無い機能が無料で使えたりするらしい WordPress:Custom Field Suiteの使い方からカスタマイズまで | 新宿のホームページ制作会社 ITTI(イッティ) https://www.itti.jp/web-design/how-to-display-custom-field-suite/ ■フックで処理を制御する ※要検証 WordPressではフックを使うことにより、特定のタイミングで処理を行わせることができる 本体やプラグインを改造する前に、アクションフックで対応できないか考える WordPressのフック、アクションフック、フィルターフックとは? - WPJ https://www.webprofessional.jp/wordpress-hook-system/ WordPressにおけるフック処理の仕組みとは? http://nanoappli.com/blog/archives/7594 プラグイン API/アクションフック一覧 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API/%E3%82%A2%E3%82%AF%E3%82%B7... ■titleタグについて 現在は wp_title() でtitleタグの内容を出力するのは、非推奨になっているので注意 (タイトルが二重に出力される可能性がある) WordPress 4.4 から wp_title関数が 非推奨になりました - ねんでぶろぐ https://nendeb.com/313 ■パスを「http」始まりではなく「/」はじまりにする テーマの functions.php に以下を記述する
class relative_URI { function relative_URI() { add_action('get_header', array(&$this, 'get_header'), 1); add_action('wp_footer', array(&$this, 'wp_footer'), 99999); } function replace_relative_URI($content) { $home_url = trailingslashit(get_home_url('/')); return str_replace($home_url, '/~wordpress/', $content); } function get_header() { ob_start(array(&$this, 'replace_relative_URI')); } function wp_footer() { ob_end_flush(); } } new relative_URI();
【WordPress】出力されるリンクURLを絶対パスからルート相対パスに変更する方法 | WordPress | マイホームブログ | Web屋の芝生DIY https://web-diy.jp/2016/10/161014_01/ ■URLを変更する add_rewrite_rule() を使えば、アクセスするURLを変更できる mod_rewrite を使うまでもなく、大抵のことには対応できそう カスタムタクソノミーURLをカスタマイズ!カスタム投稿スラッグを入れる https://yamatonamiki.com/blog/99/ パーマリンクをfunctions.phpからカスタマイズする(投稿者アーカイブのURLを変更) | H.I. Art Works Web Technorogy http://tech.hi-works.com/webcreative/793 ■管理画面のURLを変更する ログインページを変える:WordPress私的マニュアル https://elearn.jp/wpman/column/c20121118_01.html ■管理画面のフッタテキストを変更する WordPress 管理画面の「WordPress のご利用ありがとうございます。」を削除する方法 - by Takumi Hirashima https://hirashimatakumi.com/blog/5185.html ■同一LAN内の他端末からアクセスする スマートフォンから直接手元のPCにアクセスしようとしても、WordPressを http://localhost/wordpress/ のURLでセットアップしていると http://192.168.1.25/wordpress/ にアクセスしても http://localhost/wordpress/ にリダイレクトされてしまう(他端末からはアクセスできない) この場合「http://192.168.1.25」を前提としてWordPressを設置しなおせばアクセスできるが、以下のようにするだけでもアクセスできる wp-config.php
define('WP_HOME','http://192.168.1.25/wordpress'); define('WP_SITEURL','http://192.168.1.25/wordpress');
この設定があると、本来のURLよりも優先して認識してくれる ただし、マルチサイトで構築したサイトだと正しく反映されないことがあるかも?要調査 ローカル環境にコピーしたWordPressが本家にリダイレクトされる時の対処法 | TechMemo http://techmemo.biz/wordpress/redirect-local-xampp/ ■WordPress外からWordPressのデータを参照する 普通のPHPファイルで wp-load.php を読み込むと、WordPressの命令を使用できるようになる 例えば以下のようにすると、WordPressの記事を10件一覧表示できる
<?php require_once '/path/to/wp-load.php'; $posts = get_posts('numberposts=10'); ?> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>記事一覧</title> </head> <body> <h1>記事一覧</h1> <ul> <?php if ($posts): foreach($posts as $post): setup_postdata($post); ?> <li><a href="<?php the_permalink();?>"> <?php the_title(); ?></a></li> <?php endforeach; endif ?> </ul> </body> </html>
例えば以下のようにすると、ヘッダやフッタも含めて表示できる
<?php require_once '/path/to/wp-load.php'; $posts = get_posts('numberposts=10'); ?> <?php get_header() ?> <div id="primary" class="content-area"> <main id="main" class="site-main" role="main"> <h1>記事一覧</h1> <ul> <?php if ($posts): foreach($posts as $post): setup_postdata($post); ?> <li><a href="<?php the_permalink();?>"> <?php the_title(); ?></a></li> <?php endforeach; endif ?> </ul> </main><!-- .site-main --> </div><!-- .content-area --> <?php get_sidebar() ?> <?php get_footer() ?>
■WordPressのユーザーに権限を追加・削除する WordPressのユーザーに権限を追加・削除する方法 https://labe.jp/blog/webcreation/wordpress/use-authority/ ユーザーの種類と権限 - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AE%E7%A8%AE%E9%A1%9E%E3%81%A8%E6%A... 例えば以下のようにすると、「購読者」ユーザでも非公開記事にアクセスできるようになる いったん add_cap や remove_cap で権限を追加すると、削除するまでその状態が維持されている 命令を実行すると、その状態がデータベースに記録されているみたい
function allow_subscriber_read_private_posts() { $subscriber = get_role( 'subscriber' ); $subscriber->add_cap( 'read_private_posts' ); //$subscriber->remove_cap( 'read_private_posts' ); } add_action( 'init', 'allow_subscriber_read_private_posts' );
■WordPressでセッションを開始する デフォルトではセッションが開始されていない 以下のようなコードで開始する必要がある
function init_session_start() { session_start(); } add_action('init', 'init_session_start');
【WordPress】SESSIONを扱うのに設定が必要だった... https://zenn.dev/kibe/articles/d93f54f3ef9cc3 ■WordPressからWordPress外のセッションを参照する WordPressはセッションの保存先をPHPの初期設定に従わず、別の場所に保存するらしい(要検証) 一例だが function.php に以下の記述をすることで、他のプログラムとセッションを共有できる つまり、他のプログラムでセットしたセッションの内容を、WordPressから参照できる
function wp_session() { session_save_path('C:/xampp/tmp'); session_set_cookie_params(0, '/~wordpress'); session_cache_limiter('none'); session_start(); } add_action('init', 'wp_session');
うまく反映されなければ、すでに以前のパスでCookieが保存されている可能性がある Chromeなら開発者ツールを開いて「Application → Cookies」から、Cookieをクリアする ローカル開発環境なら、「http://localhost」を右クリックして「Clear」とし、ページを再読込すればいい PHP - WordPressとCakePHPのSESSION変数連携(87598)|teratail https://teratail.com/questions/87598 ■リンク切れのチェック Broken Link Checker プラグインでチェックを行える Broken Link Checker | WordPress.org https://ja.wordpress.org/plugins/broken-link-checker/ プラグインBroken Link Checker使用方法|間違えるとワードプレス死ぬよ! | ひろしワーク https://hiroshi.work/linkchecker/ リンク切れをチェックする必要性と、オススメのツール3選をまとめてみた https://viral-community.com/seo/dead-link-check-3188/ ■脆弱性の診断 ※未検証 wpscan環境をWin10 proで手っ取り早く作り、Wordpressサイトの脆弱性をスキャンしてみる - Qiita https://qiita.com/9steps/items/7860243a86ce6745702c ■特定のページで404エラーを返す Wordpressで特定ページに来たら404ページを返す - Qiita https://qiita.com/shim0mura/items/edcc2a953e1da300f983
if (条件) { global $wp_query; $wp_query->set_404(); status_header(404); nocache_headers(); include( get_query_template( '404' ) ); exit; }
■WordPressの権限 WordPress - 納品時に使える。権限設定をカスタマイズするプラグイン「User Role Editor」 | みずかず http://mizukazu.minibird.jp/wordpress-%E7%B4%8D%E5%93%81%E6%99%82%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8... 特権管理者 … マルチサイト管理機能や他のすべての機能へアクセスできるユーザー 管理者 … シングルサイト内のすべての管理機能にアクセスできるユーザー 編集者 … 他のユーザーの投稿を含むすべての投稿を発行、管理できるユーザー 投稿者 … 自身の投稿を発行、管理できるユーザー 寄稿者 … 自身の投稿を編集、管理できるが、発行はできないユーザー 購読者 … 閲覧のみできるユーザー ユーザ作成時に 「サイトネットワーク管理」の「ユーザー一覧」からユーザを登録編集しようとしても、権限の項目は表示されない(「特権管理者」の項目はある) 各子サイトの「ユーザー一覧」からなら、「権限グループ」という項目が表示されて権限を選択できる 上記のうち「特権管理者」を除く5つの権限から選択できる ※User Role Editor の有効/無効を切り替えていると、本来表示されるはずの項目が表示されないことがあるかも? 運用開始後に切り替えることは無いと思われるが、念のため要確認 ■User Role Editor プラグイン User Role Editor を導入すれば、上記権限の内容を確認&編集できる また、新しく権限を追加することもできる ■同時編集の防止 編集ロック機能で先に投稿画面に入ったユーザーを優先させる | WordPressカスタマイズ事典 http://wpcj.net/489 ユーザAとユーザBがいるとして、 ユーザAが記事編集中にユーザBが投稿一覧にアクセスすると、該当記事に 「現在 user-b さんが編集中です」 というメッセージとともにロックアイコンが表示される そのままアクセスすると
この投稿は現在編集中です。 user-b さんが現在この投稿を編集中です。 引き継ぎの操作を行わない限り、変更を加えることはできません。 [投稿一覧] [プレビュー(新しいタブで開く)] [引き継ぐ]
というダイアログが表示され、「引き継ぐ」をクリックするとユーザBで記事を編集できるようになる 編集画面にはユーザAの編集前の状態で表示され、 「以下のバージョンよりも新しい自動保存された投稿があります。」 というリンクから他ユーザの編集内容を確認でき、編集内容を復元することもできる ユーザAの画面には
他の人がこの投稿の編集を引き継ぎました。 他のユーザーが現在この投稿のコントロールを編集中ですが、ご心配なく。 これまでに加えた変更は保存されています。 [投稿一覧]
というダイアログが表示され、編集は中断される なお、複数のブラウザからユーザAで同時にログインした場合、上の警告は表示されないみたいなので注意 きちんと管理したければ、1人につき1ユーザを作成しておく ■同時編集の防止(カスタマイズ) ※キャッシュ問題の可能性はあるが、Gutenbergの兼ね合いもあって挙動が怪しい 上に記載した「同時編集の防止」のまま使用し、 ・同時編集しようとすると警告が表示されます ・かまわず編集を始めることはできますが、自動保存内容があればページ上部に 「以下のバージョンよりも新しい自動保存された投稿があります。自動保存を表示」 のように表示され、内容を復元できます と案内するに留める方が無難かも 使用しているテーマの function.php に以下を加えると、編集中ダイアログから [引き継ぐ] が削除され、あとから編集できなくなる
add_filter( 'override_post_lock', '__return_false' );
wp-admin/post.php の180行目あたりに以下の判定があり、「use_block_editor_for_post」の場合に以降の処理がスキップされるため、 「use_block_editor_for_post」でGutenbergを無効にする必要があるかも
if ( use_block_editor_for_post( $post ) ) { include( ABSPATH . 'wp-admin/edit-form-blocks.php' ); break; }
使用しているテーマの function.php に以下を加えると、use_block_editor_for_post の判定が無効になる …が、一度編集中ロックになると何故か解除されなくなるみたい? 該当箇所はJavaScriptの処理も絡むようなので、キャッシュよって正しくHTMLが反映されていないだけの可能性はある
add_filter( 'use_block_editor_for_post', '__return_false' );
編集ロック機能で先に投稿画面に入ったユーザーを優先させる | WordPressカスタマイズ事典 http://wpcj.net/489 2. 8. 1 投稿作成のカスタマイズ(1)入力 サブタイトル入力, テンプレート読み込み, テキストエディタ用フォント等 | WORDPRESS雑感 | 経営・技術コンサルタントのブログ http://blog.socon.jp/wp/wordpress/wordpress-549/ ■承認フロー ユーザを「寄稿者」として登録すると、記事を新規登録する際に以下のように表示される
[レビュー待ちとして送信] レビューをリクエストする準備ができましたか ? 準備ができたらレビューをリクエストしましょう。編集者が承認して公開できます。
管理者が記事の編集画面で「公開する」ボタンを押すと公開される 公開せずに編集したければ「レビュー待ちとして保存」を押す 公開された記事は、寄稿者は編集できなくなる レビュー待ちの記事が投稿されても管理者に通知されるわけではないが、 若干のカスタマイズもしくはプラグインの導入によって通知できるようになる レビュー待ちの投稿がされた時に管理者にメールで通知する | WordPressカスタマイズ事典 http://wpcj.net/1190 ■パスワード保護 WordPressの標準機能で可能 記事を投稿する際に「公開状態」を「パスワード保護」にすると、ユーザ側で記事を表示する際にパスワードが求められる いったん認証すると認証状態は10日間続くが、若干のカスタマイズで変更できるみたい WordPressのパスワード保護ページをカスタマイズする方法 | ワードプレステーマTCD https://design-plus1.com/tcd-w/2016/08/password.html ■プログラムから記事を投稿 以下のようにすることで、プログラムから記事を投稿できる
// お知らせを投稿 $params = array( 'post_author' => 1, 'post_title' => '投稿テスト1', 'post_content' => 'これはwp_insert_postのテストです。', 'post_status' => 'draft', ); $id = wp_insert_post($params); echo '$id=[' . $id . ']';
以下のようにすることで、カスタム投稿タイプに記事を投稿できる 投稿したIDをもとに、カスタムフィールドの内容も渡すことができる
// お客様の声を投稿 $params = array( 'post_author' => 1, 'post_title' => 'お客様の声 投稿テスト2', 'post_content' => 'これはwp_insert_postのテストです。', 'post_status' => 'draft', 'post_type' => 'voice', ); $id = wp_insert_post($params); echo '$id=[' . $id . ']'; if ($id) { update_post_meta($id, 'cat', '相談した保険のテスト'); update_post_meta($id, 'text', '本文のテスト'); }
WordPressで関数wp_insert_postを使って投稿記事データを一気に流し込む - helog https://helog.jp/wordpress/wp_insert_post/ ■プログラムからコメントを投稿 関数リファレンス/wp insert comment - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_i... 関数リファレンス/get comments - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/get_... get_comments - WordPress私的マニュアル https://elearn.jp/wpman/function/get_comments.html ■Jetpack WordPress.com 向けに提供されていたプラグインを、インストール型のWordPressでも使えるようにしたもの WordPress公式のプラグインなので安心感はある SNS連携、解析機能、サイトマップ作成、セキュリティ対策などなど、WordPressの基本機能を全般的に強化してくれる WordPress.com からサイトに接続できない場合、php-xml の追加インストールを試す また、SNS連携にも php-xml が必要みたいなので注意 無ければ連携時に「500 status code for "POST /sites/164563062/publicize-connections/new"」のようなエラーになる 【2019最新版】Jetpackプラグインの全機能&おすすめの設定方法を解説! https://adventure-life.jp/how-to-use-jetpack/ すぐに使えて便利!WordPress公式の高機能プラグイン「Jetpack」の設定方法を解説|ferret [フェレット] https://ferret-plus.com/8173
■カスタマイズ(外観)
■メニューを管理する 管理画面からメニューを登録管理できる あらかじめテーマに専用の記述をしておけば、その内容がユーザ側にも反映される [WordPress]カスタムメニュー機能の設定と設置と書き出されるソースコードを分かりやすく紹介します | オレインデザイン https://olein-design.com/blog/register-setting-souce-code-of-custom-menu WordPressのナビゲーションメニューを設定する方法をどこよりも詳しく書いた | Pasolack-パソラック- https://pasolack.com/wordpress/menu/ function.php に以下を記述しておく
function setup_nav_menus() { register_nav_menus( array( 'global' => 'グローバルナビ', 'header' => 'ヘッダーナビ', 'footer' => 'フッターナビ', ) ); } add_action( 'after_setup_theme', 'setup_nav_menus' );
「外観 → メニュー」からメニューを管理できる メニューはいくつでも作成でき、上の記述の場合は「global」「header」「footer」の3つの表示場所ができる 例えばテーマに以下のように記述すると、「global」に割り当てたメニューが表示される
<div class="global-navi"> <?php wp_nav_menu( array( 'menu_id' => 'test', // メニュを構成するul要素につけるID名 'container' => 'div', // ulを囲う要素を指定。div もしくは nav。なしの場合には false 'theme_location' => 'global', // メニュー位置を指定 'depth' => 0, // 何階層まで表示するか。0は全階層、1は親メニューまで、2は子メニューまで ) ); ?> </div>
■ヘッダー画像を管理する WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ! | オリジナルゲーム.com https://original-game.com/wordpress-custom-header/ Wordpressで「画像を切り抜く際にエラーが発生しました。」の対処方法 │ Web備忘録 https://webbibouroku.com/Blog/Article/wordpress-php-gd 管理画面からヘッダーを更新できる function.php に以下を記述しておく
$custom_header_args = array( // デフォルトで表示するヘッダー画像(画像のURLを入力) 'default-image' => get_template_directory_uri() . '/images/default.jpg', // ヘッダー画像の横幅 'width' => 500, // ヘッダー画像の縦幅 'height' => 240, // ヘッダー画像の横幅を自由なサイズで切り取れるかどうか 'flex-width' => true, // ヘッダー画像の縦幅を自由なサイズで切り取れるかどうか 'flex-height' => true, // ヘッダーテキストを表示するかどうかを指定する機能の使うかどうか 'header-text' => true, // ヘッダーテキストのデフォルトの色 'default-text-color' => '000', ); add_theme_support( 'custom-header', $custom_header_args );
「外観 → ヘッダー」からヘッダー画像を管理できる 「外観 → カスタマイズ → 色」からヘッダーの文字色を管理できる 例えばテーマに以下のように記述すると、管理画面で設定したヘッダ画像やテキストが表示される
<?php if ( get_header_image() ) : ?> <h1><img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"></h1> <p style="color: #<?php echo get_header_textcolor() ?>;"><?php bloginfo( 'description' ); ?></p> <?php endif; ?>
■管理画面のメニューを非表示にする 【WordPress】管理画面メニューのカスタマイズ - Qiita https://qiita.com/konweb/items/5483efbe87087eff5cc8 function.php に以下を記述しておく
function remove_menus() { remove_menu_page( 'index.php' ); // ダッシュボード remove_menu_page( 'edit.php' ); // 投稿 remove_menu_page( 'upload.php' ); // メディア remove_menu_page( 'edit.php?post_type=page' ); // 固定ページ remove_menu_page( 'edit-comments.php' ); // コメント remove_menu_page( 'themes.php' ); // 外観 remove_menu_page( 'plugins.php' ); // プラグイン remove_menu_page( 'users.php' ); // ユーザー remove_menu_page( 'tools.php' ); // ツール remove_menu_page( 'options-general.php' ); // 設定 } add_action( 'admin_menu', 'remove_menus' );
■管理画面のメニューを整理する プラグインで管理画面のメニューを簡単整理!「Admin Menu Editor」がお手軽でおすすめ(WordPress) http://room9.jp/2014/02/26/080000/ ■管理画面のメニューにある「投稿」の表記を変更する 管理画面の「投稿」のラベルを変更する | WordPressカスタマイズ事典 http://wpcj.net/1171 ■テーマのカスタマイズメニューを非表示にする function.php に以下を記述しておく
function customize_register_custom_demo( $wp_customize ) { //サイト基本情報 $wp_customize->remove_section('title_tagline'); //色 $wp_customize->remove_section('colors'); //背景画像 $wp_customize->remove_section('background_image'); //ヘッダーメディア $wp_customize->remove_section('header_image'); //メニュー remove_action( 'customize_register', array( $wp_customize->nav_menus, 'customize_register' ), 11 ); //ウィジェット $wp_customize->remove_panel('widgets'); //固定フロントページ $wp_customize->remove_section('static_front_page'); //追加CSS $wp_customize->remove_section('custom_css'); } add_action( 'customize_register', 'customize_register_custom_demo' );
カスタマイズメニュー内だけではなく、 管理画面のメニューからも非表示にしたければ「管理画面のメニューを非表示にする」を参照 ■管理画面のダッシュボードにウィジェットを追加する 【WordPress】管理画面のダッシュボードに任意のボックスを追加する方法 | ワープレ屋 https://worpreya.com/add-an-arbitrary-box-to-the-dashboard/ function.php に以下を記述しておく
function my_custom_dashboard_widgets() { wp_add_dashboard_widget( 'custom_help_widget', '見出しテキスト', 'my_custom_dashboard_text' ); } function my_custom_dashboard_text() { echo '<p>本文テキスト。<br>本文テキスト。</p>'; } add_action( 'wp_dashboard_setup', 'my_custom_dashboard_widgets' );
■管理画面の投稿一覧画面に列を追加する 【WordPress】投稿一覧に情報を表示するカラム(列)を追加する方法 | よしあかつき https://yosiakatsuki.net/blog/add-posts-column/ ※「カラムの追加位置を調整したい場合」のプログラムが複雑そうだが、もっと簡単に以下のように書けそう function.php に以下を記述しておく
function my_manage_posts_columns( $columns ) { $columns += array( 'my_column' => '追加カラム' ); // 最後に追加する場合 //array_splice($columns, 2, 0, array( 'my_column' => '追加カラム' )); // 3番目に追加する場合(先頭は0) return $columns; } add_filter( 'manage_posts_columns', 'my_manage_posts_columns' ); function my_manage_posts_custom_column( $column, $post_id ) { switch ( $column ) { case 'my_column' : echo '記事' . intval($post_id) . 'の追加カラム'; break; } } add_action( 'manage_posts_custom_column', 'my_manage_posts_custom_column', 10, 2 );
■管理画面の投稿画面にボックスを追加する WordPressの編集画面にメタボックスを追加する方法 | HPcode https://haniwaman.com/add-meta-box/ WordPress カスタムフィールドの使い方/ Web Design Leaves http://www.webdesignleaves.com/pr/wp/wp_custom_fields.html function.php に以下を記述しておく
function my_meta_box(){ add_meta_box( 'my_meta_box', 'テスト', 'my_meta_box_in', 'post', 'side', 'low' ); } function my_meta_box_in($post){ echo '記事' . $post->ID . 'のメタボックス'; } add_action( 'admin_menu', 'my_meta_box' );
■カスタマイズ(機能追加)
■ヘッダとフッタにコードを追加する テーマを直接編集すれば追加できるが、以下のようなプラグインもある [WordPressプラグイン] head・body内にスクリプトやタグを埋め込むならInsert Headers and Footersが便利 | unlimited chaos https://unlimitedchaos.net/wordpress-plugin-insert-headers-and-footers/ ■スライダーを表示して管理画面から制御する トップページにスライダーを表示することは多いが、 画像の追加や差し替えはときどき発生するので管理画面から制御できるようにしておくといい Smart Slider 3 が高機能で良さそう ただし動画ファイルを扱うには有料版が必要みたい。35ドル Smart Slider - The best way to build your next WordPress slider https://smartslider3.com/ Smart Slider 3 - Pricing https://smartslider3.com/pricing/ Smart Slider 3:モバイル端末にも対応した高機能スライダープラグイン | WordPress活用術 https://www.hiskip.com/wp/plugin/slider/7475.html WordPressのスライドショーに動画は入る?スライダープラグイン徹底検証 | 猫でもわかるWordPressレッスン https://wp-firststep.com/movie_to_slider/ 非常に多機能なので、後述の「Smart Slider 3」に操作メモを残している ■フォームメールを設置する プラグインで対応できる Contact Form 7 が一番有名だが、そのままではプレビュー画面を表示できない 仕事で使うなら MW WP Form が柔軟でいいかも MW WP Form - 柔軟なカスタマイズ性が魅力の WordPress 問い合わせフォームプラグイン MW WP Form 公式マニュアル https://plugins.2inc.org/mw-wp-form/ MW WP Formを使った問合せフォームの作り方 | New Standard http://newstd.net/wordpress/1829 MW WP Form のセレクトボックスで「選択してください」を空欄とみなす最も簡単な方法(JavaScript 非使用) | フロントエンドエンジニアのblog | 有限会社Willさんいん https://www.will3in.co.jp/blog/article/select-as-blank-in-mw-wp-form/ MW WP Form で、選択項目としてカスタム投稿やカスタムタクソノミーを表示する方法 https://2inc.org/blog/2013/10/13/3743/ 確認画面、完了画面を作りたいなら「MW WP Form」1択!使い方と設定方法 | HPcode https://haniwaman.com/mw-wp-form/ 以下も評判がいいみたい 要検証 WordPressのお問合せフォームはNinja Formsが噂通り神すぎた!使い方をザクッと解説 https://junichi-manga.com/wordpress-ninja-forms/ 【2018/10/3改!】WordPressのお問い合わせフォームプラグイン「Ninja Forms」が最高だった件 | 小さなお店のWeb屋さん 松本美沙のブログ  https://iwaki-kosodate.net/ninja-forms/ ■MW WP Form で複数項目のバリデーションを行う プログラムを書くことにより、複雑なバリデーションルールを設けることができるみたい(未検証) WordPress:「MW WP Form」のエラー表示周りをカスタマイズする際の備忘録 | NxWorld https://www.nxworld.net/wordpress/wp-plugin-mw-wp-form-error-customize.html MW WP Form 複数のエラーメッセージを1つにまとめる方法 | Recooord | ホームページ制作で扱うコード・プログラムを掲載 https://recooord.org/mw-wp-form-error-message-summary/ ■ローカルで MW WP Form の動作確認 前提として、フォーム作成時に必要な項目はひととおり登録しておく (先方にメールが送信されないように注意する) wp-content\plugins\mw-wp-form\classes\services\class.mail.php の90行目あたりにある
$Mail_admin->set_admin_mail_reaquire_params(); $Mail_admin = $this->apply_filters_mwform_mail( $Mail_admin ); $Mail_admin = $this->apply_filters_mwform_admin_mail( $Mail_admin );
この直後に以下を追加する
$Mail_admin->to = false;
■MW WP Form の内容をデータベースに保存 データベース機能 | MW WP Form https://plugins.2inc.org/mw-wp-form/manual/database/ 「問い合わせデータをデータベースに保存」にチェックを入れるだけで保存できる ただし管理画面での表示は、「管理者宛メール設定」の「本文」の内容をもとに作成されるようなので、ここに項目を並べておく必要があるので注意 ■MW WP Form の内容をユーザ側に表示 一例だが、以下のようにすれば表示できる
<ul> <?php $paged = get_query_var('paged'); $args = array( 'posts_per_page' => 5, 'paged' => $paged, 'orderby' => 'post_date', 'order' => 'DESC', 'post_type' => 'mwf_3303', 'post_status' => 'publish' ); $the_query = new WP_Query($args); if ( $the_query->have_posts() ) { while ( $the_query->have_posts() ) { $the_query->the_post(); ?> <li> <?php the_time( 'Y/m/d H:i' ); ?> <?php the_title(); ?> <!--<?php the_permalink() ?>--><br> [<?php the_field( 'name' ) ?>] [<?php the_field( 'product' ) ?>] [<?php the_field( 'sequence' ) ?>] [<?php the_field( 'tel' ) ?>] [<?php the_field( 'mail' ) ?>] [<?php the_field( '_mw-wp-form_data' ) ?>] </li> <?php } } wp_reset_postdata(); ?> </ul>
■会員サイトを作成する WP-Members のみ試した 日本語化など初期設定にそこそこ手間がかかりそうな感じだが、定番プラグインみたいなので解説が多くて何とかなりそう 「登録完了時に◯◯の処理をする」のような改造をしたい場合、 /wp-content/plugins/wp-members/inc/register.php を改造すれば何とかなりそう ただし改造するとプラグインをアップデートできなくなるので、do_action() などアクションフックで何とかしたいところ WordPressで会員サイトを簡単に作成できるプラグイン10選|ferret [フェレット] https://ferret-plus.com/8807 WordPressで会員サイトが構築できるプラグイン「WP-Members」 | Spider Webs https://spiderwebs.tokyo/wp-members/ 【Plugin】会員登録・ユーザー情報編集機能などを備えた「WP-Members」 http://www.hiskip.com/wp/plugin/site-manage/membership/2362.html ■記事を複製する Duplicate Postの使い方と設定方法|記事を複製できるプラグイン https://nakaeshogo.com/duplicate-post/ ■Instagramを表示する InstagramのフィードをWordPressに表示させるプラグイン「Instagram Feed」の設定方法 | 内藤勲ブログ https://naitoisao.com/23832/ Instagram フィード - WordPress プラグイン https://ja.wordpress.org/plugins/instagram-feed/ ■使用プラグイン例 某保険会社サイトの構築で使用したプラグイン。参考程度に (インポート&エクスポート系のプラグインを複数入れているが、「使えなければ他のものを試す」と作業できるようにしたため) admin-menu-editor ... Admin Menu Editor advanced-custom-fields-pro ... Advanced Custom Fields PRO(有料プラグイン) akismet ... Akismet Anti-Spam all-in-one-seo-pack ... All In One SEO Pack csv-post-manager ... CSV投稿マネージャー(有料プラグイン) custom-post-type-permalinks ... Custom Post Type Permalinks duplicate-post ... Duplicate Post google-sitemap-generator ... Google XML Sitemaps instant-comment-validation ... Instant Comment Validation(無効化されていた) mw-wp-form ... MW WP Form(確認画面が不要なら Contact Form 7 が定番) ps-auto-sitemap ... PS Auto Sitemap ps-taxonomy-expander ... PS Taxonomy Expander really-simple-csv-importer ... Really Simple CSV Importer search-regex ... Search Regex simple-301-redirects ... Simple 301 Redirects wp-all-export ... WP All Export wp-all-import ... WP All Import wp-comment-fields ... WP Comments Fields Manager(無効化されていた) wp-csv-exporter ... WP CSV Exporter wp-multibyte-patch ... WP Multibyte Patch wp-user-avatar ... WP User Avatar
■アップデートの通知
functions.php に以下を記述しておくと、各アップデートの通知をオフにできる ただし原則アップデートは行うべきなので、特別な理由が無ければオンのままにしておく
// 本体バージョンの更新非通知 add_filter('pre_site_transient_update_core', '__return_null'); // プラグインの更新非通知 add_filter('pre_site_transient_update_plugins', '__return_null'); // テーマファイルの更新非通知 add_filter( 'pre_site_transient_update_themes', '__return_null');
WordPress本体バージョンやプラグイン、テーマの更新を非通知にするために必要最小限のコード | WEMO https://wemo.tech/1879 WordPressで本体や特定のプラグインのアップデート通知を非表示にする方法をまとめてみた - INSPIRE TECH http://inspire-tech.jp/2011/07/wordpress_hide_update_notice/
■URLのリライト
■リライトルールの概要 WordPress パーマリンク リライトルール/ Web Design Leaves https://www.webdesignleaves.com/pr/wp/wp_permalink_rewrite.html 標準で利用可能なパラメーター(パブリッククエリ変数)は、 WPクラスのプロパティ $public_query_vars として wp-includes/class-wp.php に定義されている パブリッククエリ変数は直接URLクエリとして使うことができる
class WP { /** * Public query variables. * * Long list of public query variables. * * @since 2.0.0 * @var array */ public $public_query_vars = array('m', 'p', 'posts', 'w', 'cat', 'withcomments', 'withoutcomments', 's', 'search', 'exact', 'sentence', 'calendar', 'page', 'paged', 'more', 'tb', 'pb', 'author', 'order', 'orderby', 'year', 'monthnum', 'day', 'hour', 'minute', 'second', 'name', 'category_name', 'tag', 'feed', 'author_name', 'static', 'pagename', 'page_id', 'error', 'attachment', 'attachment_id', 'subpost', 'subpost_id', 'preview', 'robots', 'taxonomy', 'term', 'cpage', 'post_type', 'embed' );
プライベートクエリ変数はパブリッククエリ変数と同様、 WPクラスのプロパティ $private_query_vars として wp-includes/class-wp.php に定義されている プライベートクエリ変数はURLには使えないが、WordPressはプライベートクエリ変数を使ったクエリストリングを受け取ることができる
/** * Private query variables. * * Long list of private query variables. * * @since 2.0.0 * @var array */ public $private_query_vars = array( 'offset', 'posts_per_page', 'posts_per_archive_page', 'showposts', 'nopaging', 'post_type', 'post_status', 'category__in', 'category__not_in', 'category__and', 'tag__in', 'tag__not_in', 'tag__and', 'tag_slug__in', 'tag_slug__and', 'tag_id', 'post_mime_type', 'perm', 'comments_per_page', 'post__in', 'post__not_in', 'post_parent', 'post_parent__in', 'post_parent__not_in', 'title', 'fields' );
■リライトルールの確認 リライトルールは、WP_Rewriteで定義され、そのインスタンス $wp_rewrite に登録されている テーマの header.php などに以下のプログラムを書くことにより、内容を確認できる
<pre><?php print_r( $wp_rewrite ); ?></pre>
リライトルールだけを出力するには、以下のようにする
<pre><?php print_r( $wp_rewrite->rules ); ?></pre>
リライトルールはデータベースの options テーブルに rewrite_rules という名前で保存されているので、以下のようにしても内容を確認できる
<pre><?php print_r( get_option('rewrite_rules') ); ?></pre>
リライトルールは正規表現をキー、変換するパラメータの形式を値とした連想配列で構成されていいる リライト処理の際は、リライトルールの連想配列を先頭からURLと照合する そのため、リライトルールの中にマッチするルールが複数あった場合、より先頭に近いルールが適用されることになる ■リライトルールの変更 通常の手順でパーマリンクが test という固定ページを作成する これにより /test/ というURLでアクセスできるようになる このとき /test/foo/ というURLにアクセスすると、当然ながら404エラーとなる functions.php に以下のコードを追加する
function add_my_test_rewrite_rule() { add_rewrite_rule( '^test/([^/]+)/?$', // 正規表現パターン 'index.php?pagename=test&myvalue=$matches[1]', // 変換するパラメータ(クエリ変数)の形式 'top' // リライトルールの先頭に追加 ); } add_action( 'init', 'add_my_test_rewrite_rule' );
続いて、「管理画面 → 設定 → パーマリンク設定」で、何も変更せずに「変更を保存」をクリックする これにより、リライトルールが再生成されデータベースも更新される この状態で /test/foo/ というURLにアクセスすると、/test/ と同じ内容が表示される add_rewrite_rule() の代わりに rewrite_rules_array フィルターを使って、以下のように記述しても同じ結果を得られる
function add_my_test_rewrite ( $rules ) { $new_rules = array(); // 追加するリライトルールの配列を初期化 $new_rules['^test/([^/]+)/?$'] = 'index.php?pagename=test&myvalue=$matches[1]'; // 追加するリライトルールの配列を作成 return $new_rules + $rules; // 既存のリライトルールに作成した配列を追加 } add_filter('rewrite_rules_array', 'add_my_test_rewrite');
上記コードにある myvalue は独自のURLパラメータなので、get_query_var() を使って値を取得することができない get_query_var() を使ってカスタムパラメータ myvalue の値を取得できるようにするには、カスタムクエリ変数を追加する必要がある 以下のように query_vars フィルターを使い、myvalue をパブリッククエリ変数に追加することで対応できる
function add_myvalue_to_query_vars( $vars ) { $vars[] = 'myvalue'; return $vars; } add_filter( 'query_vars', 'add_myvalue_to_query_vars' );
もしくは以下のように myvalue と言う名前のリライトタグを追加することで、myvalue をパブリッククエリ変数に追加する
function custom_rewrite_tag() { add_rewrite_tag('%myvalue%', '([^&]+)'); } add_action('init', 'custom_rewrite_tag', 10, 0);
これで、一例だが以下のようにすると「foo」の値を取得できる (コンテンツ文字列の前に追加して表示される)
function echo_myvalue() { // スラッグが test の固定ページで、かつ myvalue というクエリ変数が空でない場合 if ( is_page( 'test' ) && !empty( get_query_var( 'myvalue' ) ) ) { // the_content フィルターに処理をフック add_filter( 'the_content', function ($content) { // クエリ変数 myvalue の値を取得 $myvalue = get_query_var( 'myvalue' ); if ( $myvalue ) { // 取得できた場合は、コンテンツの前にその値を出力 return '<p>myvalue の値は「' . esc_html($myvalue) . '」です。</p>' . $content; } else { // 取得できない場合は、そのままコンテンツを出力 return $content; } } ); } } add_filter( 'template_redirect', 'echo_myvalue' );
■リライトルールの変更例 あらかじめパーマリンクが contact のページを作成してあるものとする 以下のようにすると、/test/ にアクセスするとお問い合わせページが表示される
function add_my_test_rewrite_rule() { add_rewrite_rule( '^test$', // 正規表現パターン 'index.php?pagename=contact', // 変換するパラメータ(クエリ変数)の形式 'top' // リライトルールの先頭に追加 ); } add_action( 'init', 'add_my_test_rewrite_rule' );
あらかじめカスタム投稿タイプが staff のページを作成してあるものとする 以下のようにすると、/test/ にアクセスするとスタッフ一覧ページが表示される
function add_my_test_rewrite_rule() { add_rewrite_rule( '^test$', // 正規表現パターン 'index.php?post_type=staff', // 変換するパラメータ(クエリ変数)の形式 'top' // リライトルールの先頭に追加 ); } add_action( 'init', 'add_my_test_rewrite_rule' );
以下のようにすると、パラメータを指定することもできる この場合、/staff/tokyo/ にアクセスすると tab1 と tab2 の値も渡される
function add_my_test_rewrite_rule() { add_rewrite_rule( '^staff/tokyo$', 'index.php?post_type=staff&tab1=kantou-area&tab2=tokyo', 'top' ); add_rewrite_rule( '^staff/kanagawa$', 'index.php?post_type=staff&tab1=kantou-area&tab2=kanagawa', 'top' ); } add_action( 'init', 'add_my_test_rewrite_rule' );
■リダイレクト
■リライトルールの概要 WordPress パーマリンク リライトルール/ Web Design Leaves https://www.webdesignleaves.com/pr/wp/wp_permalink_rewrite.html add_rewrite_endpoint() を使うことにより、処理のエンドポイントを追加できる これと wp_redirect() などリダイレクト命令を組み合わせることにより、 「特定ページにアクセスされたら、特定ページにリダイレクト」ができる ■処理のエンドポイントを追加 functions.php に以下のコードを追加したとする
add_rewrite_endpoint( 'my-endpoint', EP_ROOT );
「管理画面 → 設定 → パーマリンク設定」で、何も変更せずに「変更を保存」をクリックする この状態で /my-endpoint/ というURLにアクセスすると、トップページ(EP_ROOT)が表示される functions.php に以下のコードを追加したとする
add_rewrite_endpoint( 'foo', EP_PERMALINK | EP_PAGES ); function my_foo_template_redirect() { $foo = get_query_var( 'foo' ); if(!empty($foo)) { echo 'パラメータの値: ' .$foo; exit; } } add_action( 'template_redirect', 'my_foo_template_redirect' );
「管理画面 → 設定 → パーマリンク設定」で、何も変更せずに「変更を保存」をクリックする /contact/ というページが存在するとして、この状態で /contact/foo/hello/ というURLにアクセスすると以下が表示される
パラメータの値: hello
functions.php に以下のコードを追加したとする
add_rewrite_endpoint( 'foo', EP_ALL ); function my_foo_template_redirect() { $foo = get_query_var( 'foo' ); if(!empty($foo)) { echo 'パラメータの値: ' .$foo; exit; } } add_action( 'template_redirect', 'my_foo_template_redirect' );
「管理画面 → 設定 → パーマリンク設定」で、何も変更せずに「変更を保存」をクリックする この状態で /foo/hello/ というURLにアクセスすると以下が表示される
パラメータの値: hello
■リダイレクト ※「Simple 301 Redirects」プラグインなどを使うことでもリダイレクトはできるので、それらの利用も検討するといい template_redirect の詳細については以下を参照 どのテンプレートを読み込むかを決定する直前(ページを表示する直前)に実行されるとのこと この時点ではまだレスポンス(ヘッダ)を返していないので、 wp_redirect() や wp_safe_redirect() などを使って任意の URL にリダイレクトさせることができる WordPress functions.php / Web Design Leaves https://www.webdesignleaves.com/pr/wp/wp_functions_php.html#template_redirect これを利用して例えば functions.php に以下のコードを追加したとする
add_rewrite_endpoint( 'foo', EP_ALL ); function my_foo_template_redirect() { $foo = get_query_var( 'foo' ); if(!empty($foo) && $foo == 'contact' ) { wp_redirect( home_url( '/contact/' ) ); } } add_action( 'template_redirect', 'my_foo_template_redirect' );
「管理画面 → 設定 → パーマリンク設定」で、何も変更せずに「変更を保存」をクリックする この状態で /foo/contact/ というURLにアクセスすると /contact/ にリダイレクトされる ■リライトとリダイレクトの組み合わせ例 まとめとして、以下のようなプログラムにすると
function rewrite_staff() { add_rewrite_rule( '^staff-list$', 'index.php?post_type=staff', 'top' ); add_rewrite_rule( '^staff-list/tokyo$', 'index.php?post_type=staff&tab1=kantou-area&tab2=tokyo', 'top' ); add_rewrite_rule( '^staff-list/kanagawa$', 'index.php?post_type=staff&tab1=kantou-area&tab2=kanagawa', 'top' ); } add_action( 'init', 'rewrite_staff' ); function redirect_staff() { if ( is_archive( 'staff' ) && preg_match('/^\/staff\//', $_SERVER['REQUEST_URI'])) { if (empty($_SERVER['QUERY_STRING'])) { $query = ''; } else { $query = '?' . $_SERVER['QUERY_STRING']; } wp_redirect( home_url( '/staff-list/' . $query ) ); } } add_filter( 'template_redirect', 'redirect_staff' );
・/staff-list/ にアクセスすると /staff/ の内容が表示される ・/staff-list/tokyo/ にアクセスすると /staff/?tab1=kantou-area&tab2=tokyo の内容が表示される ・/staff-list/kanagawa/ にアクセスすると /staff/?tab1=kantou-area&tab2=kanagawa の内容が表示される ・/staff/ にアクセスすると /staff-list/ にリダイレクトされる。クエリがあれば、それも含めてリダイレクトされる となる つまりSEO対策として /staff/ /staff/?tab1=kantou-area&tab2=tokyo /staff/?tab1=kantou-area&tab2=kanagawa というURLを以下のように変更したことになる /staff-list/ /staff-list/tokyo/ /staff-list/kanagawa/
■Smart Slider 3
※動画も扱える有償のPro版で検証 ■導入 wp-content\plugins 内に nextend-smart-slider3-pro を配置 プラグインページで Smart Slider 3 Pro を有効化 左メニューの「Smart Slider」から専用ページへ遷移 「Welcome to Smart Slider 3」が表示されるので「Don't show again」としておく それでも再度アクセスすると「Activate Smart Slider 3 Pro」と表示されるので、「Go to dashboard」としておく 左メニューから「Dashboard」を選択 ここで操作を行う ■シンプルなスライダーを作成 「NEW PROJECT → Create a New Project」からテスト用にスライダーを作成する Project Type: Slider Slider Type: Simple を選択して「CREATE」をクリック その後「ADD SLIDE」から「IMAGE」を追加 画面下「Publish」部分にショートコードなどが記載されているので、 それらをもとにスライダーを表示する 自動でスライドさせたければ、「Autoplay」から設定する ■スライダーにテキストのアニメーションを追加 追加した画像で「EDIT」をクリックすれば、テキストのアニメーションなどを追加できる 左メニューから「Heading」をクリックしてテキストを追加できる 挿入されたテキストの「Content → Text」を「これはテキストです」としてみる。スライドの上にテキストが表示された さらに「ANIMATION → IN → Fade」を選択し、下の「Fade」から「ADD KEYFRAME」 「Duration」を「3000」などにすると、アニメーションで表示されていることが判りやすい ■スライダーに画像のアニメーションを追加 追加した画像で「EDIT」をクリックすれば、画像のアニメーションなどを追加できる 左メニューから「Image」をクリックして画像を追加できる 挿入されたテキストの「Content → Image」の「+」から画像を選択してみる。スライドの上に画像が表示された さらに「ANIMATION → IN → Fade」を選択し、下の「Fade」から「ADD KEYFRAME」 「Duration」を「3000」などにすると、アニメーションで表示されていることが判りやすい メインビジュアルの上に画像テキストなどをフェードで表示する場合、すべて同じサイズの画像で作って上に重ねていくと位置合わせしやすい 複数の要素を重ねた場合、テキストや画像を操作するサブウインドウで、左上のアイコンからレイヤーを切り替えられる
■Instagram Feed Pro
■Instagram Feed Pro の導入 【図解付き】Instagram Feed Proのハッシュタグが表示されないときの対処法 | 山形のホームページ制作・管理に関するお悩みならWebplus https://web-plus.jp/instagramfeedpro4/ 上のページをもとに進めた。InstagramとFacebookのアカウントはあらかじめ用意しておく Facebookページもあらかじめ作成しておく 上記ページで紹介されているような、アプリ内のメニューに「ビジネスプロフィール」というメニューが無いので調査 どう使う?Instagramに新しく追加されたクリエイターアカウント|SNS運用のヒントが見つかるメディア We Love Social https://blog.comnico.jp/we-love-social/instagram-proaccounts-2019 「ビジネスプロフィール」の名称が「プロアカウント」に変わったらしい 以下、作業内容のメモ Instagramのアプリにログインして、プロフィールページの右上メニューから「設定 → アカウント → プロアカウントに切り替える」を選択 「カテゴリを選択」では「デジタルクリエイター」を選択した 「事業主ですか?」は「ビジネス」を選択した 「連絡先情報を確認してください」はそのまま「次へ」で進んだ 「Facebookとリンク」は、個人のFacebookアカウントでログインした 「コネクテッドエクスペリエンスを有効にするには、アカウントセンターを設定してください」はそのまま「次へ」で進んだ …が、またFacebookへのログイン画面に戻った。今度は「アカウントセンターを設定しますか?」で「設定を完了」を選択してみる 「InstagramアカウントをFacebookページにリンク」では、あらかじめ作成しておいたFacebookページを選択した 「ようこそ、◯◯!」という画面に遷移した。これで完了と思われる Instagram Feed Proを導入済みのWordPressの管理画面にログイン 有料版を購入した場合、まずはライセンスキーを登録しておく 管理画面の左メニューで「Instagram Feed → License」と選択すると、アクティベート画面が表示される アクティベート作業を行うと、「Inactive」という表示が「Active」に変わる メニューから「Instagram Feed → 1. Configure」と遷移し、「Instagram Connect an Instagram Account」ボタンをクリック 「Are you connecting a Personal or Business Instagram Profile?」ダイアログで「Business」を選択 InstagramのビジネスアカウントとFacebookページを選択 これで必要なタグを設置するなどで、Instagramの投稿を表示できる なお、ビジネスアカウントにすると、アカウントを非公開にすることはできなくなる Instagram側で非公開設定にしようとすると、「ビジネスアカウントは非公開にできません」と表示される ■Instagram Feed Pro の表示設定 /wp-admin/admin.php?page=sb-instagram-feed&tab=display 絞り込みは以下でできているみたい アカウント名とハッシュタグの検索はOR検索になるようだが、これならAND検索ができそう includewords Only display posts which contain certain words or hashtags in the caption. [instagram-feed includewords="sunshine"]
■プラグイン作成
■プラグインを作成する 0からわかるWordPressプラグイン開発(スッテプ・バイ・ステップ) - Qiita https://qiita.com/TanakanoAnchan/items/f1191c4c008f0a2b7c2e 最低限 wp-content/plugins/ 内に以下のファイルを作成すると、プラグインとして認識される pluginname/pluginname.php
<?php /* Plugin Name: プラグインの名前 Description: プラグインの概要 */
■データベースを扱う 関数リファレンス/wpdb Class - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wpdb... 以下も参考になりそう WordPress DBを使ったプラグイン 作成 昔ながらのアクセスカウンターを作る | システムガーディアン株式会社 https://sys-guard.com/post-14468/ WordPressのプラグインでテーブルを追加するお作法。 | Firegoby https://firegoby.jp/archives/2234 プラグインでデータベーステーブルを作る - WordPress Codex 日本語版 https://wpdocs.osdn.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3%E3%81%A7%E3%83%87%E3%83%BC%E3%8... WordPressに独自のテーブルを作って読み書きするには *Ateitexe https://ateitexe.com/wordpress-add-original-table/
■WordPressのダッシュボードにGoogleアナリティクスを表示
Google Analytics Dashboard for WP - アクセス解析をダッシュボードに表示できるプラグイン | ネタワン https://netaone.com/wp/google-analytics-dashboard-for-wp/ ExactMetrics(旧GADWP)によるWPのGoogleアナリティクスダッシュボード - WordPress プラグイン | WordPress.org https://ja.wordpress.org/plugins/google-analytics-dashboard-for-wp/ ■導入 管理画面 → プラグイン → 新規追加 → 「ExactMetrics」で検索 「ExactMetrics(旧GADWP)によるWPのGoogleアナリティクスダッシュボード」をインストールして有効化する (以前は「Google Analytics Dashboard for WP」という名前だったが、変更されているらしい) プラグインの設定画面へ 「プラグインを認証」をクリックして進む 「アクセスコードを取得」をクリックするとGoogleでの認証画面になる 「Google アナリティクス データの表示」の許可を求められるので許可する
このコードをコピーし、アプリケーションに切り替えて貼り付けてください。 4/WwF3_eCAqdECQor6A4lZunZH4lL8lUc2YSNxSsNeQithtB_65uQOcYo
と表示されるのでアクセスコードに入力し、「アクセスコードを保存する」をクリックする 「プラグインの認可が成功しました。」と表示される 設定内容を確認して「変更を保存」としておく ダッシュボードに「Google アナリティクス ダッシュボード」が追加されている 表示できる項目は以下の12項目 アナリティクス内では、以下などの手順で同じようなデータを確認できた 1. セッション ... ホーム → セッション 2. ユーザー ... ホーム → ユーザー 3. オーガニック検索 ... 集客 → チャンネル → Organic Search 4. PV ... オーディエンス → 概要 → ページビュー数 5. 直帰率 ... オーディエンス → 概要 → 直帰率 6. 地域 ... ホーム → 地域のサマリー 7. ページ ... ホーム → ページレポート 8. リファラー ... 集客 → 参照サイト 9. 検索結果 ... 集客 → 参照元/メディア 10. トラフィック ... 集客 → チャンネル 11. 閲覧環境 ... ホーム → モバイルのサマリー 12. 404エラー ... あらかじめ「404 ページのタイトルに含まれる文字列」を定義する ■意図した結果を取得できない場合 ダッシュボードに「Google アナリティクス ダッシュボード」で「データなし」になっている場合、 意図したトラッキングコードの結果を表示できていない可能性がある ユーザ側を確認すると「UA-47874057-2」とは別に「UA-47874057-1」が埋め込まれている アナリティクス → 一般設定 → ビューを選択 で「refirio.net」と「refirio.org」を選択できる 希望のものを選択して保存すると、その結果に変わる (「選択をロック」すると変更できなくなるようなので注意。この場合「認可のクリア」ボタンを押してから再度設定すればいい) ■トラッキングコードの手動埋め込み すでにトラッキングコードを埋め込んでいる場合、トラッキングコードが二重に埋め込まれてしまう この場合、 アナリティクス → トラッキングコード → トラッキングの種類 から埋め込みを無効にする ■ダッシュボードでビューを切り替え アナリティクス → バックエンド設定 → 権限 → ビューの切り替えを有効にする を「ON」にすると、ダッシュボードで任意のビューに切り替えられる ■投稿ごと、固定ページごとの解析を表示 投稿一覧、固定ページ一覧に「アナリティクス」という列が追加されている クリックすると、そのページの情報を表示できる
■メール送信
ローカル開発環境(XAMPPやDocker)でメールを送信する方法 外部のSMTPサーバを使用するので、開発&本番環境を問わず利用できるはず ■確認 ローカルのWordPressでメール送信をテスト パスワード再発行機能で以下のように表示される
The email could not be sent. Possible reason: your host may have disabled the mail() function.
■WP Mail SMTP プラグインを導入 指定したSMTPサーバーを使ってメールを送信できるようにするWP Mail SMTPプラグイン | ワードプレステーマTCD https://design-plus1.com/tcd-w/2019/03/wp-mail-smtp.html 管理画面 → プラグイン → 新規追加 から「WP Mail SMTP」をインストール&有効化 管理画面 → 設定 → WP Mail SMTP から設定 送信元アドレス: info@refirio.net メーラー: Other SMTP SMTP ホスト: smtp.lolipop.jp 暗号化: SSL SMTP ポート: 465 認証: ON SMTP Username: info@refirio.net SMTP Password: xxxxxxxx 画面上部の「Email Test」からテストする 問題なくメールが届いたら、パスワード再発行機能でもメールを送信できるようになっていた
■マルチサイト
■概要 WordPressマルチサイトのメリット・デメリット・設定方法 | 株式会社ベクトル | 名古屋でWordPressを活用したウェブ制作・システム開発 https://www.vektor-inc.co.jp/post/wordpress-multi/ 【決定版】WordPressをマルチサイト化する時のつまずきポイント全て解決!! - いーもんみつけたぞいや ー楽しむ子育てとガジェット情報ー http://info2info.net/blog/2017/03/10/wordpress001/ 【WordPress】マルチサイトでのテーマの認識。 | studio a.m. http://studio-a-m.net/%E3%80%90wordpress%E3%80%91%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B5%E3%82%A4%E3%83... マルチサイトをサブドメイン形式で使うには、以下の制限があるので注意 ・「localhost」では使えないので、ローカルテスト用にドメインの設定が必要 ・サブディレクトリには設置できない ■マルチサイトの構築 WordPressマルチサイトのメリット・デメリット・設定方法 | 株式会社ベクトル | 名古屋でWordPressを活用したウェブ制作・システム開発 https://www.vektor-inc.co.jp/post/wordpress-multi/ まずは通常の手順でWordPressをインストール Main http://localhost/~wordpress-multi/ http://localhost/~wordpress-multi/wp-login.php admin / mdTzEPQKMz@oqju6Ta /wp-config.php の「編集が必要なのはここまでです」と書かれた部分の直前に以下を記述する
/** * マルチサイト */ define('WP_ALLOW_MULTISITE', true);
管理画面にアクセスすると「ツール」の中に「ネットワークの設置」が追加されるので選択する 運用方法は「サブディレクトリへのインストール」で、 「サイトネットワーク名」と「サイトネットワーク管理者のメールアドレス」を確認して、 問題なければ「インストール」をクリックする (公開ディレクトリ直下に設置していれば、サブドメインでの運用を選択できる) マルチサイトを構築するために必要なコードが記述されたページが表示される 指示に従って /wp-config.php と /.htaccess を編集する 強制的にログアウトされるので、改めて管理画面にログインする 画面左上に「参加サイト」というメニューが追加されている ■マルチサイトの確認 http://localhost/~wordpress-multi/ http://localhost/~wordpress-multi/wp-login.php にはこれまでどおりアクセスできる 管理画面の「参加サイト → サイトネットワーク管理 → サイト」で「新規追加」をクリック サイトを追加して、追加したサイトにアクセスできることを確認する http://localhost/~wordpress-multi/test1/ http://localhost/~wordpress-multi/test1/wp-admin/ にサイトが作成されている。管理画面へはメインサイトと同じ情報でログインできる メインサイトで「サイト → すべてのサイト → (対象のサイトを選択) → ユーザー → (対象のユーザを選択)」からユーザのパスワードを生成できる http://localhost/~wordpress-multi/test1/ http://localhost/~wordpress-multi/test1/wp-admin/ test1 / K1%NXKOhQD!7eF)9g79Yg1!n http://localhost/~wordpress-multi/test2/ http://localhost/~wordpress-multi/test2/wp-admin/ test2 / M1p0YOIiYtQb&zUYUsqXy*L! このユーザでメインサイトの管理画面へログインできないが、 メインサイトの管理者は追加されたサイトの管理画面へログインできる ■テーマの追加 【WordPress】マルチサイトでのテーマの認識。 | studio a.m. http://studio-a-m.net/%E3%80%90wordpress%E3%80%91%E3%83%9E%E3%83%AB%E3%83%81%E3%82%B5%E3%82%A4%E3%83... wp-content/themes/simple1 wp-content/themes/simple2 にテーマを置くものとする ただしマルチサイトの場合、テーマを置いただけでは管理画面で選択できない メインサイトで 「参加サイト → サイトネットワーク管理 → テーマ」で「サイトネットワークで有効化」 をクリックすると、各サイトで選択できるようになる メインサイトで 「参加サイト → サイトネットワーク管理 → サイト → (対象のサイトを選択) → テーマ → (任意のテーマを有効化)」 で、特定のサイトでのみテーマを選択できるようになる ■プラグインの追加 WordPressプラグインをマルチサイトの子毎に個別に有効化する | 日常の生活と仕事を雑記するコーダーのブログ | CattleMute http://www.cattlemute.com/2018/03/09/641/ 子サイトからは追加できないみたい。メインサイトの 「参加サイト → サイトネットワーク管理 → プラグイン」 から追加できる 試しに「MW WP Form」をインストール。さらに「サイトネットワークで有効化」をクリック 各子サイトでプラグインが有効化済みになった ここで有効化せずに 「参加サイト → サイトネットワーク管理 → サイト → (対象のサイトのダッシュボードを選択) → プラグイン → (任意のプラグインを有効化)」 とすれば、特定の子サイトでのみ特定のプラグインを有効にできる ■ユーザの追加 マルチサイトで「サイトA」「サイトB」を作ったら、 サイトAの管理者はサイトAのみにユーザを追加できて、サイトBの管理者はサイトBのみにユーザを追加できる。 …と当然なっているだろうと思いきや、WordPressのマルチサイトはどうやらそういう仕様では無い マルチサイトの管理者である特権ユーザで、サイトAやサイトB用のユーザを追加できる。 という仕様になっている User Role Editor を導入し、プラグインを有効化する 日本語化されていない場合、サイトネットワーク管理の「更新」で「新しい翻訳が利用可能です。」となっていないか確認する また、親サイト管理画面の「ユーザ → User Role Editor」でページ上部にある「各権限を概説で表示する」にチェックを入れると、権限が日本語解説で表示される User Role Editor - WordPress プラグイン | WordPress.org https://ja.wordpress.org/plugins/user-role-editor/ 「User Role Editor」で権限をフレキシブルに管理しましょう【複数名運営なら是非】 | EASILY https://easily3.com/wordpress/plugin/user-role-editor/ WordPress - 納品時に使える。権限設定をカスタマイズするプラグイン「User Role Editor」 | みずかず http://mizukazu.minibird.jp/wordpress-%E7%B4%8D%E5%93%81%E6%99%82%E3%81%AB%E4%BD%BF%E3%81%88%E3%82%8... 子サイト別ではなく、サイトネットワークで全体に有効化しないと、子ブログに設定が反映されないので注意 有効化したら、親サイト管理画面の 「プラグイン → User Role Editor → 設定 → マルチサイト」 で 「特権管理者以外がユーザーの作成・編集・削除することを許可」 にチェックを入れる これで子サイトでユーザを新規登録できるようになる ■ファイルアップロード上限の変更 PHPの設定に依存するのはもちろんだが、以下の部分でも制限されているので注意 デフォルトでは「1500KBまで」となっている 参加サイト → サイトネットワーク管理 → 設定 → アップロードファイルの最大サイズ ■現状のまとめ ・特定の子サイトで特定のテーマを有効にすることはできる ・特定の小サイトで特定のプラグインを有効にすることはできる ・サブディレクトリで検証している分には、「サイト管理者が子サイトとアカウントを作成して提供」は大丈夫そう
■多言語対応(Multisite Language Switcher)
※未整理 ■概要 以下のページに 「まずBogoやWPMLを止めた理由ですが、Bogoのような1言語1記事方式のプラグインはサイト内検索のプログラムを複雑化したためです。」 と書かれているように、Bogoでも複雑化は避けられないかもしれない Multisite Language Switcher は最悪プラグインを外しても問題ないのは安心感がある http://japan3d.net/web/multisite_language_switcher/ 多言語のWordPressサイト構築方法【設計・プラグイン・設定方法】 https://manablog.org/wordpress-multilingual/ 【多言語サイト構築】簡単でプラグインに依存しない方法 | サイト制作覚書 http://japan3d.net/web/multisite_language_switcher/ 2015年 失敗しない! WordPress多言語サイト制作で 絶対に知っておきたいこと https://www.slideshare.net/katz515/howto-multilingual-wordpress-wck2015 wordpressのマルチサイトで【参加サイトに表示されない】理由は簡単なミス | サイト制作覚書 http://japan3d.net/web/multisite-setup/ ・マルチサイトを前提とする ・管理画面で「この日本語サイトのこの記事は、この英語サイトのこの記事と関連している」を登録する のみを行うプラグインみたい ■導入 https://ja.wordpress.org/plugins/multisite-language-switcher/ ダウンロード プラグインをアップロードして有効化 「設定 → マルチサイト言語スイッチャー」 「管理画面言語」を「Japanese」にして「設定」ボタンを押す 完了のはずだが、記事を投稿する画面に 「このプラグインの機能を使用するため、一つ以上のブログを他言語に定義することをお勧めします。」 と表示されている ↓不要かも↓ 「参加サイト → サイトネットワーク管理 → サイト」 英語化したいサイトの「ダッシュボード」をクリック 「設定 → 一般」 「サイトの言語」を「English (United States)」に変更して「変更を保存」ボタンを押す (その他の項目も、必要に応じて変更) ↑不要かも↑ 「参加サイト → サイトネットワーク管理 → サイト」 英語化したいサイトの「ダッシュボード」をクリック 「設定 → ユーザー → 新規登録」 メインサイトで登録済みのユーザと同じユーザ名とメールアドレスを登録する (ユーザ site-test1 が追加されていたが、メインサイトと同じ管理ユーザを登録する) …と思ったがエラーになった 「そのユーザー名は利用できません。このユーザー名はすでに使用されています !このメールアドレスはすでに使用されています !」 既存のユーザーを追加 から登録済みのユーザ名を入力して追加する 各ブログごとにプラグインを有効化する それでも 「このプラグインの機能を使用するため、一つ以上のブログを他言語に定義することをお勧めします。」 と表示されていたが、色々ページ遷移していたら何故か表示されるようになった…? 日本語記事、もしくは英語記事(どちらでも)の投稿編集画面にある 「マルチサイト言語スイッチャー」 で他の言語を選択できるので、選択して更新する ■追加設定 「外観 → ウィジェット」で「マルチサイト言語スイッチャー」を追加すると、サイドバーに言語切替リンクが表示される また、以下の方法で各記事に言語切替リンクを設置することもできる Multisite Language Switcherで複数言語の切り替えを『select option』で実装する方法。 https://manablog.org/multisite-language-switcher-select-option/
■多言語対応(Bogo)
※Bogoよりも、上に記載した Multisite Language Switcher の方がいいかも Bogoでの対応例 見かけのURLは、言語ごとのディレクトリに分割される 別のプラグインを使ったり、別々にWordPressを設置したり、マルチサイトを活用したり、など他にも色々な方法が考えられる Bogoを使ってWordpressを多言語化 - 株式会社クオックス|QOX Inc. https://qox.jp/blog/bogo-wordpress/ ■導入 Bogo - WordPress プラグイン https://ja.wordpress.org/plugins/bogo/ プラグインを導入して有効化する 管理画面メニューの「ツール」に「Bogo」が追加され…るらしいが昔のバージョンの話? 代わりに、管理画面メニューに「Languages」が追加された 「更新」にBogoの言語ファイルが現れた。更新するとメニューが「言語」になり、内容も翻訳された インストールが完了すると、管理画面の右上に言語切替のメニューが表示される 普通に日本語で記事を投稿する 投稿後に「翻訳を追加」から追加すると、その記事に紐付いた投稿が作成される タイトルをクリックすると、その記事の編集画面に移動するので、翻訳した内容に編集する http://localhost/wordpress/ で日本語の記事が表示され、 http://localhost/wordpress/en/ で英語の記事が表示される 記事内に言語切替リンクを組み込みたい場合、本文に「[bogo]」と書けば置換される ■カテゴリ Bogoを使ってWordpressを多言語化 - 株式会社クオックス|QOX Inc. https://qox.jp/blog/bogo-wordpress/ カテゴリは言語ごとにトップのカテゴリを作成し、その配下にそれぞれ作成するのが無難かも ■テーマ内で言語によって処理を分岐 Bogoを使ってWordpressを多言語化 - 株式会社クオックス|QOX Inc. https://qox.jp/blog/bogo-wordpress/
<?php if ( get_locale() == 'en_US' ) : ?> en <?php else : ?> ja <?php endif ?>
■カスタム投稿タイプに対応 標準では、通常の投稿と固定ページにのみ対応している 以下の方法で、カスタム投稿タイプにも対応できる WordPress Bogo をカスタム投稿タイプでも使う - Qiita https://qiita.com/gatespace/items/75e70f5ae162c2962dcc
/** * Support custom post type with bogo. * * @param array $localizable Supported post types. * @return array */ function my_localizable_post_types( $localizable ) { $args = array( 'public' => true, '_builtin' => false ); $custom_post_types = get_post_types( $args ); return array_merge( $localizable, $custom_post_types ); } add_filter( 'bogo_localizable_post_types', 'my_localizable_post_types', 10, 1 );
■サブドメインでの言語切替に対応 英語版は「/en/」に作られるなど、言語はサブディレクトリで切り分けられる サブドメインでの切り分けに対応できるか 要調査だが難しそう
■CLIとAPI
■CLIでの操作 【WordPress】2018年版 管理画面以外から投稿する2つの方法 | WP-CLI 編 | ITエンジニアラボ https://it-engineer-lab.com/archives/299 WordPressでWP-CLIを使って記事移行とかを少し楽にする | 株式会社LIG https://liginc.co.jp/569775 検証したい ■APIでの操作 【WordPress】2018年版 管理画面以外から投稿する2つの方法 | WP REST API 編 | ITエンジニアラボ https://it-engineer-lab.com/archives/312 WP REST APIでの記事の取得と表示[PHP版 / JS版] | koukiTips http://koukitips.net/post1790/ WordPressのREST APIでサムネイルURL付きの新着情報を作成した話(jQuery編) | PATAPATA WORKS https://patapataworks.com/wordpress-rest-api-sample-jquery/ http://localhost/~wordpress-multi/ のデータは http://localhost/~wordpress-multi/wp-json/wp/v2/posts http://localhost/~wordpress-multi/wp-json/wp/v2/posts/1 http://localhost/~wordpress-multi/wp-json/wp/v2/pages http://localhost/~wordpress-multi/wp-json/wp/v2/pages/2 などで取得できる http://localhost/~wordpress-multi/test2/ のデータは http://localhost/~wordpress-multi/test2/wp-json/wp/v2/posts http://localhost/~wordpress-multi/test2/wp-json/wp/v2/posts/1 http://localhost/~wordpress-multi/test2/wp-json/wp/v2/pages http://localhost/~wordpress-multi/test2/wp-json/wp/v2/pages/2 などで取得できる これでユーザ向けのページを作るのも一つの手段だが、テーマの利用を考えればイマイチかも 普通にWordPressにアクセスする方が良さそう
■AWS
■Webサーバを2台構成にする WordPressをAWSにEC2複数台構成で設置する方法は、サーバメモの AWS.txt の「マルチAZ環境でWordPress」を参照 ■Webサーバを3台構成にする EC2を3台構成で使用する場合、「Web3←→Web1←→Web2」で双方向同期を行えば大丈夫そう ■メディアをS3に保存 ※以前は Amazon Web Services と WP Offload Media Lite の両方が必要だったが、今は WP Offload Media Lite だけで大丈夫みたい ↓今は不要↓ Amazon Web Services https://wordpress.org/plugins/amazon-web-services/ プラグインをインストール&有効化 wp-config.php にAWSアクセスキーを記述 ↑今は不要↑ WP Offload Media Lite for Amazon S3 and DigitalOcean Spaces (WP Offload Media Lite) https://wordpress.org/plugins/amazon-s3-and-cloudfront/ プラグインをインストール&有効化 wp-config.php にAWSアクセスキーを記述
/** AWSアクセスキー */ define('DBI_AWS_ACCESS_KEY_ID', 'XXXXX'); define('DBI_AWS_SECRET_ACCESS_KEY', 'YYYYY');
設定画面でバケット名を登録 以降は、通常の手順でメディアをアップロードして挿入すればS3が使用される WordPressの既存画像をS3に移植する作業メモ | ニートエンジニアの日記 https://php-java.com/archives/2228 WordPressからS3へ画像をアップロードする。 │ 能無しプログラマーの云々 https://www.nonashi-se.com/67/ より美しくWP Offload S3 Liteに既存のメディアを登録する方法 - Qiita https://qiita.com/k-hotta/items/6f5ec85e3ae4a2f25f6d
■本番公開
公開時には以下を確認する ・管理者のメールアドレス ・フォームメールの送信先 ・検索エンジンにインデックスさせる ・Basic認証の解除 ※「検索エンジンにインデックスさせるか否か」の設定はインストール時にも表示されるが、 「インデックスさせる設定にしてBasic認証をかけておく」とする方が無難 (Basic認証の外し忘れはまず無いが、インデックスの設定変更のし忘れは十分に起こりうるため)
■セキュリティ
■全般 WordPressが駄目ということは無いが、利用者が多いので標的にはされやすい 仕事で使用する場合、本体やプラグインのアップデートを行い続けないと攻撃される可能性があるので注意が必要 セキュリティリスクが9割以上減るWordPressセキュリティの基本の基 | さくらのホームページ教室 https://www.sakura.ne.jp/column/rs/wordpress-security/ WordPressを運用中のサーバがまるごとPHPマルウェアに感染していた時の対応メモ - Qiita https://qiita.com/Ayutanalects/items/a359df4e4b445229fcf2 ASCII.jp:「WordPress」利用時のリスクとその対策 https://ascii.jp/elem/000/004/040/4040827/ WordPress セキュリティガイド #wpmeetupkyoto / WP Security Guide - Speaker Deck https://speakerdeck.com/ym405nm/wp-security-guide WordPressが改竄された時の復旧方法と絶対に改竄されない対策 | 株式会社ベクトル https://www.vektor-inc.co.jp/post/wordpress-hacked-2021/ ■管理画面にIP制限をかける WordPress管理画面にIPアドレス制限をかける方法(.htaccess) | https://weblabo.oscasierra.net/wordpress-protect-adminpage-htaccess/ WordPressのログイン画面と管理画面にIP制限を設ける方法 - Offise Kondo https://takayakondo.com/login-admin-ip-restriction/
■トラブル
■意図しないデータが取れる / 意図したデータが取れない ループが複数あると、そのような挙動になることがある。前のループの終わりで wp_reset_postdata() を呼び出すと解決することがある これを実行すると、上書きされた値をメインクエリのためのデータに戻してくれる WP_Queryで記事を取得したときはwp_reset_postdataとwp_reset_queryのどっちを使うのか | Freiheit channel https://freiheit-channel.com/?p=112 サクッと複数ループのコピペと解説|WordPressの使い方 https://wpno.jp/2017/06/5892/ WordPressの「wp_reset_postdata()」は具体的にどんな時に必要になるのかについて | たくおのーと https://takuo4649design.com/weblog/note/archives/13361 ■意図した日時を取得できない PHP標準関数の date()・time()・strtotime() で日時を取得しても、時差が発生するなど意図した値を取得できないことがある WordPressでは date() の代わりに date_i18n() を、time() の代わりに current_time() を使用するのが無難 以下はコンテンツ時限公開の例 2019-09-01 10:00:00 〜 2019-09-12 00:00:00 の間に「時限公開する内容」と表示される
<?php if (current_time('timestamp') > strtotime('2019-09-01 10:00:00') && current_time('timestamp') < strtotime('2019-09-12 00:00:00')) : ?> <p>時限公開する内容</p> <?php endif ?>
ワードプレスでPHPのdate出力を使うと時間が9時間ずれるのを防ぐ方法 | ワードプレスドクター https://wp-doctor.jp/blog/2020/12/16/%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E3%81%A7... もう ずれない! WordPress で date を扱う正しい方法 | Design Hack and Slash http://designhack.slashlab.net/how-to-resolve-incorrect-time-in-wordpress/ ■リダイレクトループ対策 リダイレクトループが発生した場合、wp-config.php に以下を書けば何とかなることがある
$_SERVER['HTTPS'] = 'on';
もしくは、以下のように書く方がいいか
if (!empty($_SERVER['HTTP_X_FORWARDED_PROTO']) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https') { $_SERVER['HTTPS'] = 'on'; }
SSL対応後のWordpress管理画面で発生した無限リダイレクトループの修正方法 - Qiita https://qiita.com/hirror/items/bb96e236c3ffc41e890e 「require_once(ABSPATH . 'wp-settings.php');」より後に書くと「このページにアクセスする権限がありません。」と言われ、 管理ページにログインできなくなるので注意 WordPress + HTTPS + リバースプロキシ = このページにアクセスする権限がありません。 - yohgaki's blog https://blog.ohgaki.net/wordpress-https-reverse-proxy-sorry-you-are-not-allowed-to-access-this-page AWSのELB配下でHTTPSリダイレクトさせる場合、以下が参考になる ELB配下のApacheで外部はHTTPSにリダイレクトし、内部のサーバのみHTTPで通信させる - Qiita https://qiita.com/wapa5pow/items/a5c4fc188e5da0ddde1d AWS EC2で常時SSLを実現する際の注意点 - Qiita https://qiita.com/michimani/items/88973c5e2ae76a8e84aa WordPressのSSL対応は、以下の記事も参考になりそう 「FORCE_SSL_ADMIN を使えば簡単にかつ強制的にできる」というだけで、これを使わずにサイトのURLを設定しても大丈夫かも(未検証) 管理画面での SSL 通信 - WordPress Codex 日本語版 http://wpdocs.osdn.jp/%E7%AE%A1%E7%90%86%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE_SSL_%E9%80%9A%E4%BF%A1
define('FORCE_SSL_ADMIN', true);
もしくは
define('FORCE_SSL_ADMIN', true); if ( ! empty( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https' ) { $_SERVER['HTTPS']='on'; }
と設定することで対応できるみたい ■ページ送りができない ※アーカイブページで404エラーになる場合 ※未検証 アーカイブテンプレートでquery_postsを使ったらページ送りで嵌った!という話。 - Toro_Unit https://torounit.com/blog/2013/02/14/1470/ [Wordpress]pre_get_postsを使いこなす!pre_get_posts使い方まとめ | EMiAC-Works http://emiac-works.com/coding/pre-get-posts-code-snipet/ Top Level Categories Fixプラグイン | WordPressで企業ウェブサイト作成・商用ホームページ制作 WordPress Go Go http://wpgogo.com/development/top-level-cats-fix.html ■管理画面以外で英語表記になる ※無理矢理な対応なので非推奨 何故か「本番環境でのみ日本語表記にならない」ということがあったので調査 /wp-includes/l10n.php の560行目あたりを以下のようにすると日本語表記になった。でも他への影響が不明 プラグインの設定が悪さをしているみたい?
558: if ( true == $plugin_override ) { 559: // unset( $l10n_unloaded[ $domain ] ); 560: 561: // return true; 562: }
「設置した翻訳ファイルの読み込みを無効にする」という処理のコメントアウトなので、問題ない…はず 何かキャッシュの設定が悪さをしているとか?不明 以下に該当箇所のコード解説がある。参考までに WordPress 英語サイト作成時に翻訳ファイルが読み込めない https://tadtadya.com/wordpress-i-can-not-read-a-translation-file-when-creating-an-english-site/ ■管理画面からテーマファイルを編集できない 管理画面の「外観 → テーマの編集」からテーマを編集できるが、編集時にWordPressのバージョンによっては 「致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。」 というエラーが表示される。 WordPress4.9からテーマ編集の入力チェックが厳しくなっており、実質この機能は使えないみたい FTP経由で更新することが推奨される 【対処法】WordPress4.9でテーマの編集がエラーでできない時 https://nomadicwood.com/archives/5802 どうしても管理画面から編集したい場合、本体プログラムを調整することで対応できる /wp-admin/includes/file.php の492行目から599行目 以下の部分を丸ごとコメントアウトすると入力チェックを外すことができる
492: if ( $is_active && 'php' === $extension ) { 493: 494: $scrape_key = md5( rand() ); 495: $transient = 'scrape_key_' . $scrape_key; 496: $scrape_nonce = strval( rand() ); 497: set_transient( $transient, $scrape_nonce, 60 ); // It shouldn't take more than 60 seconds to make the two loopback requests. 〜略〜 597: return new WP_Error( 'php_error', $message, $result ); 598: } 599: }
【エラー修正】致命的なエラーをチェックするためにサイトと通信できないため、PHPの変更は取り消されました。 https://take-it-easy.tokyo/miscellaneous-notes/wordpress/correct_fatal_error ■古いjQueryが読み込まれる 古いjQueryが自動で読み込まれてしまい、それが原因でJavaScriptが動かないことがあった HTMLを確認すると、以下のように読み込まれていた
<script type='text/javascript' src='/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
以下を参考に対応 WordPressでjqueryとjquery-migrateの2つの読み込みを解除する方法 | Musible https://musible.net/web/wp-jquery-unload.html 具体的には、functions.php に以下のコードを追加した (問い合わせページで発生した問題だったので、URLに「contact」が含まれる場合のみの対応とした)
function my_scripts_method() { wp_deregister_script('jquery'); } if (preg_match('/^\/contact\//', $_SERVER['REQUEST_URI'])) { add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); }
■サーバ負荷が急激に上がることがある ※未検証 WordPressのCron処理を無効にしてみると改善することがあるらしい WordPressで定期的に処理をさせる!WP-Cronの設定方法 - 東京のホームページ制作 / WEB制作会社 BRISK https://b-risk.jp/blog/2017/09/wp_cron/ WordPress の wp-cron を無効にしたら劇的にパフォーマンスが改善した話 | あぱーブログ https://blog.apar.jp/web/7430/ wp-cron.phpを無効化して高速化される理由 | ハックノート https://hacknote.jp/archives/37075/ ■メンテナンスモードが終了しない WordPressのどの画面にアクセスしても「現在メンテナンス中のため、しばらくの間ご利用いただけません」と表示され続ける場合の対応 以下にあるように .maintenance を削除すればアクセスできるようになるが、更新が本当に完了しているのかは不明のような 「現在メンテナンス中のため、しばらくの間ご利用いただけません」が表示された時の対処法 | てらこや.work https://www.terakoya.work/wordpress-maintenance-howto/

Advertisement