ワードプレスのサイドバーの側面を変更する方法

パー ブレアJersyer | WordPressのチュートリアル

最近、読者のXNUMX人が、WordPressテーマのサイドバー側を変更する方法を尋ねました。

通常、この質問は、サイドバーの場所を左から右または右から左に変更するユーザーから寄せられます。

このチュートリアルでは、WordPressのサイドバーの場所を変更する方法を示します。

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

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

ワードプレスe1568058176266でサイドバーの位置を変更する方法

WordPressのサイドバーの場所を変更するのはなぜですか？

使いやすさの専門家は、人々がページを左から右にスキャンすると信じています。 ユーザーが最初にこのコンテンツを見ることができるように、重要なコンテンツを左側に配置することをお勧めします。 ただし、WebサイトがRTL言語の場合、これは逆になる可能性があります（右側に).

を調べる WordPressブログにサイドバーが必要ですか

多くのWordPressWebサイトは、XNUMX列の典型的なブログレイアウトを使用しています。 XNUMXつはコンテンツ用で、もうXNUMXつはサイドバー用です。

典型的なコンテンツデモWordPressサイドバー

Webサイトを初めて使用する場合は、希望の場所にサイドバーがあるWordPressテーマを選択する必要があります。

多くの WordPressテーマ サイドバー設定でサイドバー側を変更するオプションを提供します。 ただし、WordPressテーマにこのオプションがない場合は、サイドバー側を手動で変更する必要があります。 発見してさらに進んでください WordPressのサイドバーを削除する方法

そうは言っても、CSSを使用してWordPressのサイドバー側を簡単に変更するために使用する方法を見てみましょう。

CSSでサイドバーを変更する

WordPressテーマに変更を加える前に、まず 子テーマの作成。 子テーマを使用すると、変更を失うことなく親テーマを更新できます。

発見 ワードプレスの各項目ごとに異なるサイドバーを表示する方法

次に、アクティブなテーマをリアルタイムで変更するときは、常にWordPress Webサイトのバックアップを作成する必要があります。

WordPressテーマファイルを編集するには、FTPクライアントが必要です。 相談する FTPを使用する方法のガイド.

FTPクライアントを使用してWordPress Webサイトにログインし、テーマフォルダーに移動します。 通常、次の場所にあります。

 / Yoursite / WP-コンテンツ/テーマ/あなたのテーマフォルダ/

次に、WordPressテーマのメインスタイルシートファイルをダウンロードして、メモ帳などのテキストエディタで開く必要があります。 このファイルは style.cssの、WordPressテーマのルートディレクトリにあります。

発見 WordPressファイルとフォルダーを管理する方法

このファイルで、サイドバーのCSSクラスを見つけます。 通常、このクラスは「 サイドバー 」。 この例では、デフォルトのWordPressテーマ「 20 15 サイドバーにこのクラスを持っている人：

.sidebar {float：left; マージン右：-100％; 最大幅：413px; 位置：相対; 幅：29.4118％; }

ご覧のとおり、サイドバーは-100％のマージンで左に浮いています。 フロートを右に変更します。

.sidebar {float：右; マージン左：-100％; 最大幅：413px; 位置：相対; 幅：29.4118％; }

変更を保存し、FTPクライアントを使用してstyle.cssファイルをWebサイトにアップロードします。 これで、Webサイトにアクセスすると、次のようになります。

デモサイトは、サイドバーを変更します

実際、サイドバーは移動しましたが、コンテンツ領域は移動しませんでした。 " 二十フィフティーン このCSSを使用して、コンテンツ領域の位置を定義します。

.site-content {display：block; float：左; マージン左：29.4118％; 幅：70.5882％; }

コンテンツを右に移動するように変更します。 次のように：

.site-content {display：block; float：左; マージン右：29.4118％; 幅：70.5882％; }

このCSSコードを適用すると、Webサイトは次のようになります。

サイドバーのウェブサイトを移動した新しいプレゼンテーション

ご覧のとおり、コンテンツ領域とサイドバーの場所を変更しました。 ただし、左側にはまだ白いブロックがあります。

発見してさらに進む WordPressファイルとフォルダーを管理する方法

CSSを使用すると、これらのエラーが頻繁に発生します。 これの原因と修正方法を理解するには、いくつかの探偵の仕事が必要です。

ブラウザの「インスペクタ」ツールを使用して、ソースコードを表示します。 ブラウザの影響を受ける領域にマウスを向け、右クリックしてブラウザメニューから[インスペクタ]を選択します。

ブラウザツールを検査

ソースコードビュー内でマウスを動かすと、ライブプレビューで強調表示されている影響範囲に気付くでしょう。 右側のペインに、選択した要素に使用されているCSSが表示されます。

私たちを発見 ブログのCSSを視覚的に編集するための5 WordPressプラグイン

そのため、強調表示されたアイテムに対応するCSSを再調整する必要があります。

@media screenおよび（最小幅：59.6875em）{body：before {background-color：#fff; box-shadow：0 0 1px rgba（0、0、0、0.15）; 内容： ""; ディスプレイ：ブロック; 高さ：100％; 最小高さ：100％; 位置：固定; 上：0; 左：0; 幅：29.4118％; z-index：0; / * Safariでのスクロールに関するフラッシュのバグを修正* /}

このCSSコードは、29,4118％幅の空のブロックと100％の幅を左上に追加します。 右に移動する方法を次に示します。

@media screenおよび（最小幅：59.6875em）{body：before {background-color：#fff; box-shadow：0 0 1px rgba（0、0、0、0.15）; 内容： ""; ディスプレイ：ブロック; 高さ：100％; 最小高さ：100％; 位置：固定; 上：0; 右：0; 幅：29.4118％; z-index：0; / * Safariでのスクロールに関するフラッシュのバグを修正* /}

スタイルシートを保存してサーバーにアップロードすると、次のようになります。

右側の新しい外観のウェブサイトのサイドバー

CSSでの作業は、初心者にとって混乱を招く可能性があります。 すべての手動作業を行いたくない場合は、試してみてください WordPress CSS Heroプラグイン。 コードを記述せずにCSSを編集でき、すべてのWordPressテーマで機能します。

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

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

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

1。 Zxeion

ゼシオンは強い WordPressのプラグイン あなたのウェブサイトのセキュリティを向上させる責任を負うプレミアム。 このプラグインには、Web サイトを潜在的な攻撃から保護する保護およびセキュリティ ツールのコレクションが含まれています。Zxeion wordpressプラグインは、マルウェアウイルスの攻撃からサイトを保護します

そのリアルタイム保護システムは、あなたが何もすることなく、あなたのウェブサイトに対する脅威を特定し、それらをブロックするのを助けます。

私たちも発見 WordPressのサイドバーを強化する7つのプラグイン

その機能は次のとおりです。リアルタイム保護、優れたカスタマーサポート、定期的な更新、IPアドレスブロッカー、優れたドキュメント、最新のプロフェッショナルなインターフェイス、専用のカスタマーサポートなど

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

2。 Slaido 

スライドは、 WordPressのプラグイン プレミアムでは、約 320 のレスポンシブ スライダー テンプレートから選択して、数回クリックするだけでそのうちの XNUMX つを Web サイトにインポートできます。 これは、テンプレートの完全なパックであり、 スライダー革命。 したがって、これを完全に使用するには、最初にインストールする必要があります WordPressのプラグインスライダー革命ワードプレス用のSlaidoテンプレートパック

その主な機能は次のとおりです。スライダーの応答性の高いレイアウト、スライダーのインポートまたはエクスポートの容易さ、定期的な更新、24時間年中無休で利用可能なカスタマーサポート、流動的で非常にクールなアニメーション、クイックスタート、Googleフォントのサポート、その他多数のビデオチュートリアル。

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

3。 お問い合わせフォーム

お問い合わせフォームは、応答性の高いWordPressプラグインであり、シンプルなツールですが、訪問者がメッセージを残して連絡できる、明確で心強いフォームを表示できるカスタマイズオプションが豊富です。

ワードプレスお問い合わせフォームプラグインからお問い合わせください

必要なフィールドを定義し、フィールドの最適なレイアウトを選択し、それを完全にカスタマイズして、顧客や訪問者に提案やメッセージを残すように促すことができます。

また、読むことをお勧めします： レストランのウェブサイトを作成および管理するための10 WordPressプラグイン

メッセージを受信する電子メールアドレスを設定し、それを使用してビジネスを最も収益性の高い方向に成長させるだけです。

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

推奨リソース

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

まとめ

そこ！ このチュートリアルは以上です。 WordPressブログのサイドバー側を変更するのに役立つことを願っています。 お気軽に お気に入りのソーシャルネットワークでこの記事を友達と共有する. 

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

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

...  

コメントを投稿

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

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