メモ > 技術 > CMS: WordPress > カスタマイズ(機能追加)
カスタマイズ(機能追加)
■ヘッダとフッタにコードを追加する
テーマを直接編集すれば追加できるが、以下のようなプラグインもある。
[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
■ECサイトを作成する
※未検証。
WooCommerceとは?基本機能やメリット・導入ステップを解説|KOMOJU
https://ja.komoju.com/blog/woocommerce/
WooCommerce
https://woocommerce.com/
WooCommerce - WordPress プラグイン | WordPress.org 日本語
https://ja.wordpress.org/plugins/woocommerce/
■記事を複製する
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