WordPressのアクションフックとフィルターフック: A guide for non-developers

そろそろ Customizr のガイドを本気で読みたいので頑張って日本語訳をしてみる(英語もウェブも初心者レベル)

まずは「hook」の意味を理解する

フックの意味

留め金、鉤、釣り針、釣る、引っ掛ける、つるすなどの意味をもつ英単語で、プログラミングでの意味は、プログラム中の特定の箇所に、利用者が独自の処理を追加できるようにする仕組み追加された処理のこと。 主に元のプログラムに対する機能追加・拡張やカスタマイズの手段として使われる。独自の処理を追加することは「フックする」という。

フック・・・独自の処理を追加できる仕組みのこと 追加された処理のこと

フックする・・・独自の処理を追加すること

The basics

ワードプレスのページはたくさんの関数やデータベースクエリ(queries)で、できています。ワードプレス&テーマがテキスト、画像、スタイルシート、その他のファイルをアウトプットし、ブラウザーがそれらをすべてまとめて翻訳し1つのウェブページを表示しているのです。

ワードプレスとCustomizrは、それらすべてのコードに「hook」を追加しているので、あなたは独自の処理を追加することが可能です。 Customizr の多くの code snippets もそれらを使ってphpで書かれています。「フック」には「Actions」と「Filters」の2種類あります。

「Actions」・・・ページを作成してるときに、ある特定のポイントでエクストラで機能性を追加できる。(do stuff)
(ウィジェットやメニューやメッセージの追加)

「Filters」・・・データをを傍受(ぼうじゅ)したり修正したりする。(change stuff)
(もう1個 CSS のクラスを挿入したり Customizr のページblockを修正したり)

* クエリ(query)・・・データベースからデータを抽出したり操作したりといった処理を行うための命令のこと。「問合せ」と訳されることもある。

Getting down to details

When Gill comes by, tell her to go to the store to get some paint. When Jack comes by bragging about how great he is, get him to say that Gill is better.

Actions

When Gill comes by, tell her to go to the store to get some paint.

 function  機能、関数
 argument 引数(ひきすう)
 execute 実行する(=run)
 set priority 優先順位を設定する
 variable  変数
 tone down  和らげる
 brag about ~  〜を自慢する
 boast  自慢する
append  追加する、添える
 string  ひも、糸、一連、ひと続き、文字列
 concatenate 鎖状につなぐ、連結する、
 disrupt 崩壊させる
swap 物 with 人 2つ以上の物を人と交換する

Sending Gill to the store to get paint might look like this in PHP:

dfg


Custom post type UI とYARPPで関連記事をカスタム投稿にも表示する方法

wordpressの関連記事を表示するプラグイン、YARPP ( Yet another related post )を追加しましたが、デフォルトだとCustom post type IU で追加したカスタム投稿タイプには関連記事が表示されないよう。(固定ページと投稿ページだけ表示できる)

 

 

どうしてもカスタム投稿タイプに関連記事を表示したかったのでやり方を調ると

 

 

 

functions.php に register_post_type を記述し、オプションに「’yarpp_support’ => true」を追加する

 

 

ということです。具体的には

 

 

1、 Custom post type UI の Manage Post Types から該当する post type の 「 Get Code 」をクリック

 

2、 表示されたコードを function.php に貼付ける

 

3、 コードの中の register_post_type の記述内に ‘yarpp_support’ => true を追記

 

 

add_action(‘init’, ‘cptui_register_my_cpt_lecture’);
function cptui_register_my_cpt_lecture() {
register_post_type(‘lecture’, array(
‘label’ => ‘麻雀教室’,
‘description’ => ”,
‘public’ => true,
‘show_ui’ => true,
‘show_in_menu’ => true,
‘capability_type’ => ‘post’,
‘map_meta_cap’ => true,
‘hierarchical’ => false,
‘rewrite’ => array(‘slug’ => ‘lecture’, ‘with_front’ => true),
‘query_var’ => true,
‘has_archive’ => true,
‘supports’ => array(‘title’,’editor’,’excerpt’,’trackbacks’,’custom-fields’,’comments’,’revisions’,’thumbnail’,’author’,’page-attributes’,’post-formats’),
‘labels’ => array (
‘name’ => ‘麻雀教室’,
‘singular_name’ => ”,
‘menu_name’ => ‘麻雀教室’,
‘add_new’ => ‘Add 麻雀教室’,
‘add_new_item’ => ‘Add New 麻雀教室’,
‘edit’ => ‘Edit’,
‘edit_item’ => ‘Edit 麻雀教室’,
‘new_item’ => ‘New 麻雀教室’,
‘view’ => ‘View 麻雀教室’,
‘view_item’ => ‘View 麻雀教室’,
‘search_items’ => ‘Search 麻雀教室’,
‘not_found’ => ‘No 麻雀教室 Found’,
‘not_found_in_trash’ => ‘No 麻雀教室 Found in Trash’,
‘parent’ => ‘Parent 麻雀教室’,
),
‘yarpp_support’ => true
) ); }

 

参考記事:Custom Post Type UIとYARPPでカスタム投稿の関連記事を表示させる方法


Yet another related post / wordpress plugin

YARPPで「タイトル」と「内容」の選択肢がグレーアウトして選択できない件

 

1 データベースのストレージエンジンを「 MyISAM 」に変更した

 

さくらインターネットのコントロールパネル

データベースの設定

ログインして該当するデータベース(左上)を選択

wp〇〇〇posts(左のサイドバー)をダブルクリックして

操作(上のバー)をクリック

テーブルオプションのストレージエンジンを「 MyISAM 」に変更(もともとは「InnoDB』だった)

*さくらインターネットの場合「InnoDB」になってるみたい

  

ダメだった!(グレーアウトのまま)

   

2 YARPPの設定を消してしまう

  

ちなみにYARPPのアンインストールもやってみたけどだめだった。

 

 

MyISAM Override check doesn’t work

It may be best to completely clear out the YARPP settings in this case. You can go to the wp_options table and delete all the options with ‘yarpp’ in the name. There should be a few.

 

 

・・・と作者が言っていたのでこれをやってみよう。

一応、英語と聞いただけでじんましんが出て呼吸困難に陥り卒倒するお前らのために訳してあげると、「これはYARPPの設定を一回消したほうがいいね。wp_optionsテーブルのなかで、name列(正確にはoption_nameという列だった)が’yarpp’から始まるレコードを全部削除してみ」ということだ。

 

 

ということでさっきの画面から

 

wp〇〇〇options(左のサイドバー)をダブルクリックして

「option_name」という列(上のバー)で並び替え

「yarpp~」で始まるレコードにチェックを入れて

「❌」ボタン(下)を押してレコードを削除

成功!(「タイトル」も「内容」も選択できるようになった)

  

参考記事:【WordPress】YARPPの関連スコア設定が選択できない場合の対処方法

  
本当たすかりました。グアバさんありがとうございました。


WordPress テーマ Customizr でカスタムポストタイプの分類が一覧表示されるページをカスタマイズするまでにやったこと

Customizrでカスタムポストタイプの分類を一覧表示するためにやったこと

 

かなり混乱したので忘れないように

 

    1. Custom post type UI で「雀士」というカスタムポストタイプをつくる
      • ポストタイプ(post type)・・・雀士(player)
      • 分類(taxonomy)・・・・・・・タイプ(type)
      • ターム・・・・・・・・・・・・女流プロ雀士・男性プロ雀士・有名人・天鳳関係・キャラクター

*タームの作成画面はメニューから分類名(タイプ)を選択するとでてくる

    1. Custom post type を使いやすくするプラグイン Advanced custom field で「雀士」というフィールドグループを作成し、player_birth , player_blood_type , player_class , player_nickname , player_image , player_blog などのフィールドを作成

 

    1. フィールドをページに表示させるために、single.php などのファイルに Advanced custom field のコードを記載しなくてはいけないのだけど、使っているテーマ「Customizr」には single.php のファイルがなかったので index.php にコードを記入。*個別記事ページのテンプレート階層の優先順位は、① single-player.php ② single.php ③ index.php

 

  1. この時点で問題が2つ① テーマがアップデートされると、書いたコードがきえてしまう② index.php にコードを書いたらちゃんと表示はされたけれど、ラベルを表示したり、テーブルの中に表示したいけど、ラベルや空のテーブルは html で書くことになるので、当然ながら他のページにもそれらが表示されてしまう。 例えば、「血液型:O型」と表示させたくても 「血液型」の部分やテーブルは関係ないページにまで表示されてしまう

子テーマをつくったら問題が解決した

    1. まずは、以前の記事で書いたように、親テーマがアップデートされても子テーマは影響を受けないので ①番目の問題は解決。具体的なやり方もこちらに記載。子テーマをつくっておけば、親テーマがアップデートされても子テーマで編集した内容は影響を受けない
  1. ②番目の他の関係ないページまでにラベルやテーブルが表示されてしまうという問題を解決するために、子テーマに single-player.php をつくり、Customizrの親テーマの custom-page.php をコピーして、そこに Advanced custom field のコードを記載。コードはいろいろな書き方が紹介されていていろいろ試したけど上手く表示されたりされなかったりで、結局はリンクしてある本家のページで紹介されているコードを書いたらうまくいった。これでカスタムポストタイプ「雀士(player)」のページだけにhtmlで書いたラベルとテーブルが表示されて、フィールドの記入があればそのページのフィールドの内容も表示されるようになった!

カスタムフィールドの分類名の一覧が表示されるページにカスタムフィールドの内容が表示されない

    1. ところがここで③つめの問題。カスタムフィールドの分類名「(例)女流プロ雀士」の一覧が表示されるページにカスタムフィールドでつくった内容が表示されない。(個別のページには表示されてるのに)アーカイブのページには通常のエディタに書いた内容だけが表示されるような仕様になっているよう
    1. そこで、子テーマに taxonomy-type.php をつくって親テーマから archive.php をコピペしようとしたけど、「Customizr」には archive.php がない。ちょっと特殊なテーマみたい。テーマをかえようかと思ったけどデザインが気にいってしまったので意地でもこのテーマで頑張ろうと「Customizr」のファイルを読めないのに読みまくって class-content-post_list.php というファイルがどうも archive.php のようなものかと class-content-post_list.php をコピペして子テーマの taxonomy-type.php に貼付けてみたら・・・・・分類名「女流プロ雀士とか」のページが消えた!
  1. 「Customizr」には、taxonomy.php も single.php もないので「Customizr」の親テーマの custom-page.php を子テーマの toxonomy-type.phpにコピペ → 子テーマの taxonomy-type.php の中にカスタムフィールド「雀士(player)」のコードを記入して、分類が一覧表示されるページ「女流プロ雀士とか」をみてみると・・・・・ちゃんとフィールドの内容も一覧表示されてたー!!やったことを整理してみると、結局同じ内容で名前の違うファイルが2つあるということか。なんかちょっと変な気はするけど(混乱)

    Customizr 子テーマの中のファイル

     

    single-player.php・・・・・親テーマの custom-page.php をコピペしてカスタムフィールド「雀士(player)」のコードを記載

    taxonomy.php・・・・・・親テーマの custom-page.php をコピペしてカスタムフィールド「雀士(player)」のコードを記載

Advanced custom field のコード記入に参考になるページ


WordPressテーマのカスタマイズは子テーマでする

Advanced custom fieldでつくったフィールドを表示させようと悪戦苦闘してやっとできた時に「Customizr」のアップデートを要求された。「編集した内容はすべて消えてしまいます」みたいな警告があったので一応コードをメモしてアップデートを実行したら、やっぱり消えてしまう。

 

さて、アップデートされても編集した内容をキープするためにはどうすればいいのかいろいろ調べたら、子テーマを作成してそれをカスタマイズすれば、親テーマがアップデートされても子テーマで編集した内容は影響を受けないということがわかった。

 

「あーまた、大変な作業が待っている」と思ったら結構簡単にできた!忘れない様にメモ

 

 

子テーマをつくっておけば、親テーマがアップデートされても子テーマで編集した内容は影響を受けない

 

  1. 親テーマと同じディレクトリ(階層)に子テーマのフォルダをつくる(名前は自分でつけてOK)
  2. 子テーマのフォルダの中に、自分がカスタマイズしたいファイル(例:style.css など)をつくる
    *フォルダの中には style.cssを含んだファイルが2個以上ないとエラーになる模様 たぶん
  3. ファイルには下記のようにコードを記入

 

 

Theme Name: 子テーマの名前(自分で名前をつける)

Template: 親テーマのディレクトリ名(大文字・小文字区別)

*/

@import url (“../親テーマのディレクトリ名/親テーマの読み込みたいファリル名“);

 

記入例がこちら

 

/*
Theme Name: Customizr Child
Template: customizr
*/

@import url(“../customizr/custom-page.php“);

 

 

あとは編集したい内容をこの下に書いていけばOK

 

参考にしたページ
WordPressテンプレートのカスタマイズは子テーマで


Advanced custom field のコード記載例

Advanced custom field

シンプルにカスタムフィールドを表示する

 

フィールドタイプ/画像

返り値の選択肢(画像オブジェクト・画像URL・画像 ID) で「画像URL」を選択した場合

 

条件つき(もし値が入力されていたら)

グーグルマップで地図を表示するのに一番簡単だった方法

デフォルトのカスタムフィールドに住所を入力する方法

wordpressにデフォルトでついているカスタムフィールドに住所を入力する方法 → カスタムフィールドに住所を入力 → グーグルマップで地図表示

これが一番簡単でした。下記のコードを表示したい場所に記入するだけ

<?php if ( post_custom(‘event_address’) ) : ?>

<?php

$addressformap = post_custom(‘event_address’);

$addressformapencode = urlencode(mb_convert_encoding($addressformap, “UTF-8″,”auto”));

?>

<iframe width=”90%” height=”350″ frameborder=”5″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”http://maps.google.co.jp/maps?q=<?php echo $addressformapencode; ?>&z=18&output=embed”></iframe>

<?php else : ?>

<p>Sorry, No map.</p>

<?php endif; ?>

Advanced custom field のフィールドタイプ「Google map」を使う方法

公式のページ Creating a Google Map field に書いてあった下記のコード1と2を「single-ポストタイプ.php」にコピペ。3のCSSは「style.css」にコピペしたらやっと表示されたけど住所を入力しても反映されない。マーカーを自分で動かさなきゃいけなくて使えなかった

1 Render a single maker onto a map

3 CSS


Custom post type UI

カスタム投稿タイプの作成(製品)

  1. 投稿タイプ名・・・半角英数字で記入
  2. ラベル・・・左のメニューに表示される文字

Advenced option

  1. 一般公開
  2. UIを表示
  3. Has Archive・・・trueにしないと投稿を一覧表示させることができない
  4. Exclude From Search
  5. 利用タイプ
  6. 階層・・・親子関係をつかるか
  7. リライト
  8. カスタムリライトスラッグ
  9. With Front
  10. クエリーバージョン
  11. メニューの位置
  12. Show in Menu
  13. Menu Icon
  14. サポート
  15. ビルトイン分類・・・ブログを同じカテゴリーやタグを利用することができる

 

カスタム分類の作成(家具の種類 ルームタイプ)

タームの作成(ソファー ベッドルーム)


WordPressでつくったサイトのURLをドメイン名のみで表示させる方法(さくらインターネット)

さくらインターネットでwordpressをインストールしたとき、デフォルトだとサイトのアドレスがドメイン名/ファイル名というふうになってしまいます。例えばこちらのサイトにワードプレスをインストールしてファイル名をexampleとした場合、サイトのアドレスは

http://web.sutajiamu.com/example と表示されます。

 

これをなんとか、以下の方法で http://web.sutajiamu.com と表示させるようにします。

 

1 マルチドメイン対象のフォルダを変更する

 

コントロールパネルの

【ドメイン設定】➡ ドメイン一覧から該当するドメインの【変更】をクリックする

multidomain

 

① マルチドメインとして使用する(推奨)にチェックを入れ
② マルチドメイン対象の指定フォルダを記入

 

ここは混乱したけど、ドメイン名+フォルダ名をそのまま入れるとそれがそのまま独自ドメインとして使えるようになるということみたい

 

2 Wordpress側での設定

 

ダッシュボードの【設定】→【一般】の

 

wordpressアドレス(URL)とサイトアドレスをドメイン名に変更します

 

3 管理画面のURLを変更

上記の変更でログインアドレスも、web.sutajiamu.com/example/wp-admin から

web.sutajiamu.com/wp-adminn にかわるのでそのままログインしようとするとエラーになるけど

URLから「example」をとってログインするとできます