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


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」をとってログインするとできます