WordPressプラグインで入稿画面をカスタマイズする

「ACF」のコンテンツを表示させる為の子テーマを作成する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
「ACF」で追加したコンテンツを表示させる為の子テーマを作成する方法について、子テーマとは何かの解説を行いながら、子テーマ用のファイルの作成方法について解説していきます。
講師:
05:59

字幕

このレッスンでは Advanced Custom Fields略して「 ACF 」で追加したコンテンツを表示させる為の子テーマを作成する方法について解説していきます。子テーマとは WordPress の一つのテーマをベースにして、それを上書きするような形でもう一つ同じテーマを作る機能のことを言います。このようにすることで親テーマに影響を与えずにテーマに対してカスタマイズを加えていき事が可能になります。されでは画面をみてみましょう。今回はこの画面に表示されているテーマに対して子テーマを作成してみたいと思います。それでは WordPress のファイルをみてみましょう。はいこれが WordPress を構成しているファイルとなります。では WordPress のテーマフォルダをみてみますまずはこちらの「 wp-content 」というフォルダの中に入って、そしてこちらの「 themes 」というフォルダの中に入ります。するとこのように現在 WordPress にインストールされているテーマのフォルダが表示されてきます。今現状ウェブサイトの方に適応しているテーマはこちらの「 twentyfifteen 」というものになります。 今回はこの「 twentyfifteen 」というテーマの子テーマを製作していくわけですがついにこちらの画面ではその製作は完了している状態となっていて、それがこちらの「 twentyfifteen_child 」というものになります。このように分かり易いように「 twentyfifteen の子供だよ」という名前をフォルダに与えています。では次にこちらの「 twentyfifteen_child 」のフォルダの中に入ってみます。するとこのように二つのファイルだけが存在していますね。一つは「 style.css 」というものともう一つは「 content.php 」というものです。これらのファイルは元々に親テーマ要するにこちらの「 twentyfifteen 」の中にあるこの中から「 style.css 」こちらですね、とこちらの「 content.php 」をコピーしてこちらの child の方に持ってきたものとなります。それでは実際にこれらのファイルをエディタで開いてみましょう。はいこの画面がそれらのファイルをエディタで開いた状態です。この様に「 twentyfifteen_child 」の中の「 style.css 」と「 content.php 」を開いた状態になっています。 子テーマを作成するに当たってはこちらの「 style.css 」の方に一文付け加えてあげる必要があります。それがこちらの部分です。こちらのコメントの中に「 Template 」と書いてそしてコロン、そしてその後に親テーマの名前を指定してあげます。今回は「 twentyfifteen 」ですね、この名前はこちらの親テーマのフォルダ名に一致します。このようにすることでこちらの「 twentyfifteen_child 」というのは「 twentyfifteen の子テーマだよ」ということを指定してあげことができます。そして次にこちらの「 Theme name 」、こちらの部分ではこの子テーマの名前を指定してあげます。今回は「 twentyfifteen_child 」と指定してあげています。このようにすることでこのテーマが「 twentyfifteen の子テーマだよ 」ということをすぐに分かる様にしています。それでは次にこちらの「 content.php 」をみてみましょう。この「 content.php 」は元々の「 twentyfifteen 」のテーマの中で投稿の内容を表示させるプログラムの中が書かれたファイルとなっています。 このテーマも親テーマとなる「 twentyfifteen 」からそのままコピーして持ってきたものとなりますが、今回のカスタムフィールドの値を出力するに当たってはこちらの「 content.php 」に対してそのプログラムを追加していきます。このようにプログラムを変更したいファイルだけを親テーマから持ってきてそしてその子テーマの中で該当するファイルを編集することによって親テーマに影響を出さずに子テーマにのみその変更を反映されることができるようになっているわけです。それではここまでできたらWordPress の管理画面に移ってみましょう。はいこれが WordPress の管理画面です。こちらの左メニューの中から「外観 テーマ」をクリックしてあげるとこのような画面なります。現在はこちらの「 twentyfifteen 」が有効化されていますね。そしてその隣に目を移すと、このように先程作成した子テーマ「 twentyfifteen_child 」が表示されています。それではこちらにマウスオーバーさせてそして「有効化」というボタンをクリックしましょう。するここちらの「 twentyfifteen_child 」の方が有効化されました。 それではこちらの子テーマを反映させたウェブサイトの方もみてみましょう。はいこれがその子テーマを反映させた状態のウェブサイトとなります。このように見た目では全く親テーマの「 twentyfifteen 」と同じ見栄えになっていますね。それは子テーマが親テーマの設定を全体的に引き継いでるということを表したいます。以降のレッスンからは実際にこちらの子テーマに対してカスタムフィールドで入力した内容を出力するプログラムを書いていてみたいと思いますのでそちらまわして参考にしてみてください。以上でレッスンは終了です。今回は Advanced Custom Fields で追加したコンテンツを表示させる為の子テーマを作成する方法について解説致しました。

WordPressプラグインで入稿画面をカスタマイズする

WordPressは世界中で使われている無料のWeb制作ソフト/CMSです。その機能を拡張してさらに便利にしてくれるのがAdvanced Custom Fieldsです。このコースではその機能の紹介からプラグインの入手先やインストール方法、さらにはフィールドグループの作成やサイトへの出力まで詳しく紹介します。

1時間36分 (19 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
ウェブデザイン
CMS
価格: 1,990
発売日:2016年01月12日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。