カスタムテンプレートとデザインをDiviのブログ投稿フォーマットに追加する方法（パート1/3）

公開: 2017-05-02

Diviのブログ投稿フォーマットにカスタムスタイルを追加する方法に関するシリーズの3日目の1日目へようこそ。 デフォルトでは、Diviには、標準、ビデオ、オーディオ、見積もり、ギャラリー、リンクの6つのブログ投稿形式が付属しています。 このシリーズでは、phpとcssを使用してそれらをカスタマイズする方法を説明します。

今後3日間で、Diviのすべてのブログ投稿形式（標準、見積もり、リンク、ビデオ、オーディオ、ギャラリー）のカスタマイズについて説明します。 これらすべてを編集するには（私が考えているデザインの場合）、single.phpテンプレートファイルを編集する必要があります。 これを適切に行うには、変更したSingle.phpテンプレートファイルを含むDivi子テーマを作成する必要があります。 その前に、Desktopserverを使用してWordPressのローカルインストールも作成する必要があります。 これにより、ライブWebサイトで何もリスクを冒すことなく、安全な開発スペースを利用できます。

この投稿のタイトルが示すように、最初から最後まですべてをカバーするのに3日かかります。 今日は、Desktopserverを使用してWordPressのローカルインストールを作成し、変更されたブログ投稿形式を格納するために使用する子テーマを作成する方法を紹介します。

このシリーズは、ここで公開されているチュートリアルの大部分よりも「高度」であると思います。 ただし、初心者の場合、このシリーズは実際には、開発スキルを向上させ、安全で無料のガイド付き投稿シリーズで新しいものに分岐する絶好の機会です。

始めましょう！

何が来るのかを覗き見

これは、このシリーズで実現するデザインの概要です。 今日の投稿でそれらの基礎を築いた後、single.phpファイル（すべてのブログ投稿形式のテンプレート）を編集する方法と、CSSを使用して各形式のテンプレートをさらにスタイル設定する方法を示します。 それはかなりの旅になるでしょう！

開発アセットの準備

今日のチュートリアルと、今後2日間に作成したチュートリアルに沿って従う必要があるものは次のとおりです。

  • Atom、Sublime、Brackets、Notepadなどのコードエディター+ +（お好みのもの）
  • DesktopServerを使用したローカルWordPressインストール（既にお持ちでない場合）
  • ディビチャイルドテーマ-私たちが作成します！

このシリーズを続ける場合は、テストと開発のためだけにセットアップされたWordPressインストールで行うことを強くお勧めします。 私が最後に望んでいるのは、人々が自分のライブWebサイトを試して、何かを台無しにすることです。

WordPressのローカル開発インストールをセットアップする方法がわからない場合は、無料バージョンのデスクトップサーバーを使用することをお勧めします。 わずか数分でローカルのWordPressインストールを実行できるようになります（誇張ではありません）。

コンピューターでのDesktopServerのセットアップ

DesktopServerを使い始めるためのいくつかの手順は次のとおりです。

彼らのウェブサイトにアクセスし、右側の列にある[無料–カートに追加]ボタンをクリックして無料版をダウンロードします。

チェックアウトページで、個人情報を入力し、利用規約に同意して、[購入]をクリックします。

[購入確認]ページで、オペレーティングシステムに適したダウンロードを選択します。 MacまたはWindowsの最新バージョンをインストールすることをお勧めします。

ダウンロードを解凍し、コンピューターでアプリケーションのインストールを実行します。

これで、DesktopServerアプリケーションは、ローカルディスク（C :)ドライブのルートにある「xampplite」というフォルダーにあります。

Desktopserverをインストールしたら、その手順を読んで、ローカルのWordPressインストールのセットアップを開始するのに役立ててください。

このシリーズのDivi子テーマの作成

Diviの子テーマを作成するには、WordPressテーマファイルにアクセスする必要があります。 DesktopServerのインストール時にデフォルトに従った場合、テーマファイルは「Websites」というラベルの付いたフォルダー内のdocumentsフォルダーに配置する必要があります。

テーマフォルダを見つけて、「子」という新しいフォルダを追加します。

次に、style.cssファイルを子テーマフォルダーに追加します。 これは、子のテーマを構成する3つのファイルの最初のものです。

テキストエディタを開き、ドキュメントの最上部に次のCSSヘッダーを含む新しいファイルを作成します。 

/*
 Theme Name:     Divi Child
 Theme URI: 
 Description:	   Divi Child Theme
 Author:
 Author URI:   
 Template:       Divi
 Version:        1.0.0
 License:  
 License URI:  
 Tags:  
 Text Domain: 
*/

必要に応じて、子テーマのCSSヘッダーの残りの情報をサイトに合わせて追加できます。

名前と拡張子が「style.css」の新しいファイルを保存します。 そして、それを子テーマフォルダに追加します。

子テーマフォルダーに追加する必要がある次のファイルは、functions.phpファイルです。

テキストエディタに戻り、別の新しいファイルを作成して、次のphpコードをドキュメントの最上部に追加します。 

<?php 
function my_theme_enqueue_styles() {
    $parent_;
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

正確な名前と拡張子「functions.php」でファイルを保存し、子フォルダーに追加します。

子テーマに必要な最後のファイルは、Diviのsingle.phpファイルです。 子テーマのstyle.cssファイルに新しいCSSを追加するとともに、Diviのsingle.phpファイルのコピーを使用して、さまざまな投稿タイプのレイアウトを編集します。

single.phpファイルを見つけるには、Divi（親）テーマフォルダーに移動します。

single.phpファイルをコピーして、子テーマフォルダーに貼り付けます。

これで、子テーマのsingle.phpファイルをカスタマイズする準備が整いました。

新しい子のテーマをアクティブにする

single.phpテンプレートファイルのカスタマイズを開始する前に、先に進んで新しい子テーマをアクティブ化します。

ワードプレスダッシュボードから、[外観]→[テーマ]に移動し、DiviChildという新しい子テーマの[アクティブ化]ボタンを選択します。

今のところ以上です！

これはまだそれほどエキサイティングではないことを私は知っていますが、あなたが私と一緒にいてくれることを願っています。 プロジェクトの適切な基盤を築くことが重要であり、この投稿は開始するのに最適な場所です。

明日は何ですか？

これで、WordPressのローカルインストールと子テーマがアクティブ化されたので、このシリーズの次のパートの準備が整いました。 明日は、Diviのsingle.phpファイルを編集して、ブログ投稿形式に完全に固有のレイアウトを作成する方法を紹介します。

以下のフィードバックをお待ちしております。 ローカルサーバーに子テーマを設定すると、最初のタイマーで問題が発生する可能性があるため、できる限り質問に答えます。 ただし、技術的な問題がさらに発生した場合は、サポートチームが準備を整えており、喜んでお手伝いします。 デスクトップサーバーの人々は言うまでもありません！

乾杯！