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


phpとは

PHPとは

    1. Hypertext Preprocessor
    2. サーバーサイドスクリプト言語・・・サーバー側で動くプログラム言語
      (Javascriptはクライアントサイドスクリプト言語)
    3.   HTMLを動的に作るのが主な目的

記述ルール

  1. 開始タグ <?php と、終了タグ ?> の間に書く
  2. 1行終わったらセミコロン(;)
  3. ファイルの拡張子は .php
  4. コメントの記述方法

     

変数のルール・・・データをいれておくBOX

  1. 頭に「$」をつける
  2. 変数名には数字とアルファベット、アンダーバー(_)が使える(ハイフンはつかえない)
  3. $ マークの直後に数字は使えない
  4. 大文字と小文字は区別される
  • <?php $sitename = "Web stadium"; ?>   //サイトの名前は「Web stadium」にします
  • <head>
  • <title><?php echo $sitename; ?></title> //ここに$sitenameに代入した文字列を出力して
  • </head>

*「=」はイコールではなく代入という意味

*「echo」は文字列を出力しろという命令

<?php $sitename = “PHP学習日記”; ?><?php echo $sitename; ?>


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. ビルトイン分類・・・ブログを同じカテゴリーやタグを利用することができる

 

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

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