最近、読者のXNUMX人が、WordPressテーマにパララックス効果を追加する方法を尋ねました。
パララックス効果は、背景画像が前景コンテンツよりもゆっくりとスクロールするWebで最近人気のあるトレンドです。
このチュートリアルでは、WordPressテーマにパララックス効果を簡単に追加する方法を紹介します。
ただし、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法
しかし、私たちがここにいる理由に戻ってください。
視差効果とは何ですか？
パララックス効果は、背景要素が前景コンテンツよりもゆっくりとスクロールする最新のWebデザイン手法です。 この効果により、背景画像に奥行きが加わり、インタラクティブになります。
私たちを発見 25ワードを視差でテーマを設定してウェブサイトを作成する
パララックス効果は ランディングページ、販売ページ、またはビジネスWebサイトのホームページ。 長いページのさまざまなセクションを強調表示するのに最適な方法です。
多くの プレミアムWordPressテーマ ホームページにパララックス効果が組み込まれています。 ほとんどのプラグインで視差効果を使用することもできます WordPress ページの視覚的な作成。
しかし、すべて WordPressテーマ は組み込みの視差効果を提供しないため、視差効果のためだけにビジュアル ページ ビルダーを使用したくない場合があります。
パララックス効果をWordPressテーマに簡単に追加する方法を見てみましょう。
方法1：プラグインを使用して任意のWordPressテーマにパララックス効果を追加する
この方法では、WordPressテーマにコードを追加する必要はありません。 これは、ほとんどのユーザーにとってより簡単で推奨されます。
最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです 高度なWordPressの背景。 詳細については、 WordPressプラグインのインストール方法に関するステップバイステップガイドを確認してください.
プラグインをアクティブにした後、パララックス効果を追加するページを編集する必要があります。 新しいボタン「高度なWordPressの背景»ビジュアルエディタのツールバー。
それをクリックすると、ポップアップウィンドウが表示され、追加するさまざまな背景設定を変更できます。
まず、背景として画像を選択してから、オプション「」をチェックする必要があります。 Stretch'。
次に、ボタンをクリックする必要があります 画像を選択 使用する画像をダウンロードまたは選択します。 必ず大きな画像を使用してください。使用しないと、ピクセル化されて表示されます。
その後、効果を有効にする必要があります 視差 視差効果の種類を選択する。 実験できるスタイルはたくさんあります。 使用される最も一般的な視差効果はスクロールです。
ボタンをクリックします インセット 続行します。
プラグインは追加します ショート あなたの上 出版社。 次のようになります。
[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "full" awb_parallax = "スクロール" awb_parallax_speed = "0.5" awb_mouse_parxx "Your_xallax =" true "awb_mouse_ballaxここ[/ nk_awb]
置換」 このコンテンツ 自分のコンテンツごとに、ページを保存します。
Webサイトにアクセスして、実際の動作を確認できます。
方法2：CSSを使用してWordPressテーマに「Parallax」効果を追加する
この方法では、WordPressのテーマとプラグインがどのように機能するかだけでなく、「HTML / CSS」の知識が必要です。
まず、WordPressメディアライブラリにアップロードする必要があります。これは、パララックス効果に使用する画像です。 メディア>新規追加 '。
発見してさらに進む WordPressのブログにメディアを整理する方法
画像をアップロードした後、WordPressメディアライブラリで画像を編集して画像のURLをコピーする必要があります。
次に、視差効果を表示するページに次のHTMLコードを追加する必要があります。 このHTMLコードをに追加することもできます WordPressテーマまたは子テーマ.
div class = "parallax"> ここにあなたのコンテンツ...
次に、次のカスタムCSSコードをWordPressテーマに追加する必要があります。
.parallax { 背景画像: url("https://example.com/wp-content/uploads/2017/08/my-background-image.jpg");高さ: 100%;背景添付: 修正されました。背景位置: 中央;背景リピート: リピートなし;背景サイズ: カバー;マージン左:-410px;マージン右:-410px; .parallax-content {幅:50%;マージン:0 自分;色:#FFF;パディングトップ:50px; }
背景画像のURLを自分の画像に置き換えることを忘れないでください。
これで、変更を保存してWebサイトにアクセスできます。
ここは ！ これで、パララックス効果をWordPressWebサイトに追加できます。
いくつかのテーマとプレミアムWordPressプラグインもご覧ください
他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。
ここでは、そのためのプレミアムWordPressプラグインを提供しています。
1。 WooCommerceの寄付
この拡張機能を通じて、WooCommerce Webサイトで、顧客が指定した金額の寄付を受け入れます。 彼らは彼らが望むだけ多くを与えることができるでしょう。 各寄付は、の通常の製品として提示できます WooCommerce.
顧客がカートページをスキップするか、寄付せずに直接チェックアウトに移動すると、チェックアウトページの上にリンクが表示され、寄付できるようになります。
WooCommerce Donationを使用する各ステップは、スクリーンショット付きのドキュメントで説明されています。 プラグインをアクティブ化するだけで、カートに[寄付を追加]フィールドが表示されます。
2。 LinkedInもっと
LinkedIn プラスは、 WordPressのプラグイン これにより、LinkedIn プロファイルをブログに表示できます。 複数の著者がいるブログでも機能します。 WordPress の投稿、ページ、またはウィジェットに [フォロー] ボタンと [共有] ボタンを追加します。
これは、LinkedInのすべての機能をブログに追加し、消費者にブランドを検証するための優れた方法です。 外観をカスタマイズしたり、設定を構成したり、その他の高度なオプションをアクティブにして、潜在的な採用担当者や雇用主にプロファイルを宣伝したりすることができます。
3。 youtubeに
YouTubeRは WordPressのプラグイン ウェブサイトから YouTube に動画をアップロードし、YouTube の動画、プレイリスト、チャンネルをウェブサイトに簡単に埋め込むことができるユニークなプラットフォームです。
このプラグインを使用すると、ウェブサイトに優れたビデオギャラリーを作成できます。
その他の機能は次のとおりです。 WordPress WebサイトからYouTubeにビデオを簡単にアップロード、統合 Webサイトへの簡単なビデオ、プレイリスト、YouTubeチャンネル、Visual Composerのサポート、 プレイリストでの無限スクロール、優れたキャッシュ、レスポンシブレイアウト、 詳細なドキュメントなど。
推奨リソース
ウェブサイトの構築と管理に役立つ他の推奨リソースをご覧ください。
- WordPressの「ディスクに書き込めません」エラーを修正する方法
- 成功したブロガーになり、WordPressでお金を稼ぐ方法
- ワードプレスに電子メールであなたの記事を公開する方法
- 成功したブロガーになり、WordPressでお金を稼ぐ方法
まとめ：
以上です！ お役に立てば幸いです。 することを躊躇しないでください お気に入りのソーシャルネットワークで友達と共有する.
しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。
また、提案や意見がある場合は、セクションに残してください commentaires.
...
