ワードプレスの全ページの幅を作成する方法

パー パッシーガイ | WordPressのチュートリアル

WordPressで全角ページを作成しますか？

多くの WordPressテーマ すでに、使用できる全幅のページテンプレートが組み込まれています。 ただし、一部のWordPressテーマにはこの機能がありません。 この中 tutoriel、WordPressで全角ページを簡単に作成する方法を紹介します。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

WordPressで全幅のページを作成する

方法1：WordPressテーマに組み込みの幅テンプレートを使用する

WordPressテーマに既に全角ページテンプレートが提供されている場合、この方法をお勧めします。 お持ちでない場合は、以下のセレクションをチェックして入手してください。

まず、ページを編集するか、「」にアクセスして新しいページを作成する必要があります。 ページ>追加 新しいページ。

ページ編集ウィンドウで、 全幅 ページ属性チェックボックスの下のテンプレートとして。

ページテンプレートの選択

モデルを選択した後 全幅ページを登録する必要があります。 ページのカスタマイズを続行してさらにコンテンツを追加するか、プレビューボタンをクリックして動作を確認できます。

全幅のページ

ページ編集画面に[全幅]-[全幅]-テンプレートオプションがない場合は、WordPressテーマにそれがないことを意味します。 

ただし、心配しないでください。WordPressテーマを変更せずに全角ページを簡単に作成する方法を紹介します。

2メソッド：全幅のページテンプレートを作成する方法

この方法では、使用しているWordPressテーマのファイルを編集し、PHP、CSS、およびHTMLの基本を理解している必要があります。

ところで、私達はまた相談するためにあなたを誘います 8最高のWordPressプラグインでレイアウトを簡単に作成 

しかし、先に進む前に、あなたはしなければなりません WordPressバックアップを作成するか、少なくとも現在のWordPressテーマのバックアップを作成します。 これにより、何か問題が発生した場合にWebサイトを簡単に復元できます。 

まず、メモ帳などのテキストエディタを開き、次のコードを空のファイルに貼り付ける必要があります。

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

次に、このファイルを「 フルwidth.php コンピューター上。

このコードは、ファイルテンプレートの名前を設定し、WordPressにヘッダーテンプレートを抽出するように指示するだけです。

次に、コードのコンテンツ部分が必要になります。 FTPクライアントを使用してWebサイトに接続します（cPanelの中​​またはファイルマネージャ）その後、「 / WP-コンテンツ/テーマ/あなたのテーマフォルダ/ '。

次に、 "というファイルを見つける必要があります page.php "。 これは、テーマのデフォルトのページテンプレートファイルです。

関数の後にすべてをコピーします« GET_HEADER（） そして、ファイルに貼り付けます " フルwidth.php コンピューターで作成したもの。

ファイル "full-width.php"の内容を見て、次のコード行を削除する必要があります。

<?php get_sidebar(); ?>

この行は単にサイドバーを取り、WordPressテーマに表示します。 これを削除すると、テンプレートを使用するときにテーマにサイドバーが表示されなくなります 全幅.

この行がWordPressテーマに複数回表示される場合があります。 WordPressテーマに複数ある場合 サイドバー（フッターはサイドバーとも呼ばれるウィジェット領域)コード内で参照される各サイドバーが表示されます。 保持するサイドバーを決定する必要があります。

ウェブサイトの読み込みが遅いようです。 WordPressブログを画像で最適化する必要がある理由

テーマのページにサイドバーが表示されない場合、このコードがファイルにない場合があります。

これが、full-width.phpコードが変更を行う方法です。 コードは、テーマによって若干異なる場合があります。

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        // Start the loop.
        while ( have_posts() ) : the_post();

            // Include the page content template.
            get_template_part( 'template-parts/content', 'page' );

            // If comments are open or we have at least one comment, load up the comment template.
            if ( comments_open() || get_comments_number() ) {
                comments_template();
            }

            // End of the loop.
        endwhile;
        ?>

    </main><!-- .site-main -->
</div><!-- .content-area -->
<?php get_footer(); ?>

次に、ファイルをダウンロードする必要があります フルwidth.php »WordPressテーマフォルダで FTPクライアント.

これで、カスタムの全幅ページテンプレートが正常に作成され、テーマにアップロードされました。 次のステップは、このテンプレートを使用して全幅のページを作成することです。

ダッシュボードに移動して、新しいページを編集または作成します。

ページ編集画面で、ページ属性チェックボックスを見つけて、[テンプレート]オプションの下のドロップダウンメニューをクリックします。

ワードプレスページのエディションでのモデルの選択

モデルを見ることができます。 先に進み、選択してページを保存または更新します。

これで、Webサイトにアクセスできます。サイドバーがなくなり、ページがXNUMX列のページとして表示されます。 まだいっぱいではないかもしれませんが、これで別の方法でストリーミングする準備が整いました。

発見してあなたのウェブサイトを人気に 画像のSEOを最適化する7 WordPressプラグイン

テーマがコンテンツ領域を定義するために使用するCSSクラスを見つけるには、検査ツールを使用する必要があります。

次に、CSSを使用して幅を100％に調整できます。 次のCSSコードを使用しました。

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Twenty Seventeenのようになります。

デモテーマのワードプレスのプレゼンテーション

このチュートリアルはこれですべてです。フル幅のページを作成できることを願っています。

上記の方法は、全幅または全幅のレイアウトを簡単にすばやく作成したいと考えている人には無料です。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 Divi Builder

Divi Builderは、高品質のページビルダーです。 エレガントなテーマ。 通常、Divi WordPressテーマの一部として使用されますが、Divi Builderは、他のWordPressテーマで使用できるスタンドアロンプ​​ラグインでもあります。

ディビe1544278044306

Divi Builderを使用すると、フロントエンドのビジュアルインターフェイスとバックエンドのインターフェイスを使用してコンテンツを編集できますが、ほとんどのユーザーは最初のインターフェイスを好みます。

基本的に、サイドバーの代わりに、すべてポップアップとフローティングボタンになっています。 これにより、316の異なるプレゼンテーションパックにまたがる40の事前に設計されたテンプレートにアクセスできるほか、独自の設計をテンプレートとして保存することもできます。

発見することを提案します プロのブログを作成する方法

Diviの特徴の1つは、常に彼が提供するスタイルのコントロールでした。 3つの異なるタブで、レスポンシブコントロール、カスタマイズ可能な間隔など、さまざまな設定を構成できます。

CSSエディターには基本的な検証と自動完了が含まれているため、カスタムCSSを追加することもできます。 Divi Builderの批判のXNUMXつは、常に依存しているということです。 ショートコード。 つまり、いつか無効にすると、コンテンツに多数のショートコードが残ります。 これは少し気のめいるようですが、Shortcode Cleanerのようなプラグインが存在するようになったので、問題は少なくなりました。

ダウンロード | デモ | ウェブホスティング

2。 テーマビルダー

Themify Builderは、当然のことながら、Themifyチームの製品です。 それをいくつかのWordPressテーマに統合して、顧客に簡単なカスタマイズオプションを提供します。 ただし、スタンドアロンプ​​ラグインとして購入して、任意のWordPressテーマで使用することもできます。

Themifyビルダーのアニメーション画面e1544277050530

Divi Builder や WPBakery Page Builder と同様に、Themify Builder を使用すると、フロントエンドまたはバックエンドでレイアウトを作成できます。 もう XNUMX つの良い点は、このプラグインを使用すると、レスポンシブ ブレークポイントをカスタマイズできることです (ただし、Web サイト全体のレベルでのみ)。

発見 WooCommerceのインストールと設定方法 以下のために オンラインストアを作成する インターネットで商品を簡単に販売できます 

Themify Builder の優れた点の XNUMX つは、標準の WordPress エディターを引き続き使用できることですが、他のページ ビルダーでは WordPress インターフェースを使用する必要があります。 ページビルダー 全てにおいて。

ダウンロード | デモ | ウェブホスティング

3。 Elementor

Elementor WordPressプラグインは、もともと2016年にリリースされたもので、このリストで最も若いページビルダーの1つです。 開始が遅れたにもかかわらず、ElementorはWordPress.orgで000を超えるアクティブなインストールをすばやく獲得し、最も人気のあるWordPressページビルダーの000つになりました。

Elementor Pro E1544277036401

その評判を作っているのは、その流動的な視覚インターフェース、その異なるスタイルオプション、およびWordPressテーマの完全な作成などの他の強力な機能です。

インターフェイスは2つの主要部分に分かれており、特定のパラメーター用の3番目のゾーンがあります。 Elementorの無料版では、28の無料のウィジェットを提供しています。 Proバージョンは、30の他のウィジェット、Proバージョンの合計58ウィジェットをもたらします。 無料版には約40の無料テンプレートが含まれていますが、Pro版には何百もの追加テンプレートが含まれています。

 ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。

まとめ

ここは ！ このチュートリアルは以上です。 全幅ページをテンプレートとして提供していないWordPressテーマがある場合は、このチュートリアルがその不足を解決するのに役立つことを願っています。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する. 

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

提案や意見がある場合は、セクションに残してください commentaires.

... 

1コメント

  1. (マルカム I ロス博士)
    (マルカム I ロス博士) 12年2019月19日53時間XNUMX分

    こんにちは。 こんにちは、
    私は「thetheen」というテーマを持っており、2倍の方法でサイドバーのない家を作りました。 左側ではメニューバーが空のままになりますが、色は残ります。 空のサイドバーが表示されるため、cmqページは非対称です

    返事

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.