6つのステップで2021年にWordPressウェブサイトを構築する方法。 A to Zガイド

2021年にWordPressウェブサイトを構築する方法

2017年には、私が働いていた会社でwebデザインを学ぶ機会がありました。

私はHTML、CSS、Javascriptを学び始めました。 私はかなりそれを楽しんだ。 私は私の最初のバグに遭遇するまで。 後で、私は側面のプロジェクトを割り当てられた:実際のウェブサイト。 私は助けを求めたとき、私の同僚は私のためにそこにいた、興奮していました。

数ヶ月後、私はNGOのためのpro-bono WordPressの割り当てに取り組んでいました。

私たちは旅行市場にいて、私はマーケティングをしていたと述べてみましょう。 しかし、新しいスキルを学ぶことで人々に力を与えるこの文化がありました。

私はDIYタイプで、学習コードの学習曲線が予想よりもはるかに長いことに気付きました。 WordPressでは、物事は異なって働きました。

早送り、2020年に、私はColibriメーカーのために働いてしまった、Colibriは人気のあるWordPressのドラッグアンドドロップページビルダーです。

物事は、このようなツールで、今日はとても簡単です。 WordPressは本当に時間がないのゼロからウェブサイトを構築するために人々に力を与えることができます。 そしてウェブサイトのためのインスピレーションはちょうど…インターネッ

今、ここにステップがあります:

  1. あなたのドメイン名を選択してください
  2. ウェブサイトホスティングを取得
  3. WordPressのインターフェイスに慣れる
  4. WordPressのテーマをインストー u x c a l i f ragilisticexpialidociousウェブサイトを持つために十分ではありません,私はガイドの最後にあなたのための一つのボーナスを持っています:uxデザインのヒントとトリック.

    しかし、話題に飛び込む前に、私は別の主題に光を当てたいと思っています。 時間はかからない約束する

    ワードプレスのウェブサイトの費用はいくらですか?

    WordPressウェブサイトのコスト内訳を作成する場合は、以下を含める必要があります:

    • ドメインの購入:価格はyear15/year
    • で開始できますホスティング買収:価格は8 8/year
    • WordPressのテーマと同じくらい低く開始します。 これで、カスタマイズのレベルと含める機能の数に応じて、$0から始めることができます。 あなたは基本的なウェブサイトで解決したくない場合は、年間のWordPressのテーマプランは7 70を中心に展開します。
    • それらの多くは無料ですが、高度なオプションが必要な場合は、有料プランにアップグレードする必要があります。

    これは、最も基本的なウェブサイトはyear23/年から開始されることを意味します。 あなたは高度なテーマ機能をしたい瞬間、コストは約$100/年に上昇します。

    プラグインをアップグレードすると、年間約200-500ドルを支払うことになるかもしれません。

    カスタムメイドのものが必要で、WordPressの開発者を呼び出す必要がある場合、コストは最初の年に$1000を超えることができます。

    オンラインストアでは、多くの機能が必要であり、パフォーマンスとセキュリティが最優先であるため、コストが大幅に増加する可能性があります。

    これをクリアしたので、今日のトピックの最後に到達する時間です:2021年にWordPressウェブサイトを作成する方法。

    あなたのドメイン名を選択してください

    あなたのウェブサイトのドメイン名を選択してください

    ソース: https://unsplash.com/photos/N1XUwR8iOf0

    これをまだ知らなかったら、ドメイン-ネームはあなたの商号か製品名である。 名前は実際に強力である場合もある従ってあなたのドメイン-ネームを選ぶとき性急があってはいけない。 あなたが冷たい足を得ていると感じたら、心配しないでください、あなたを助けることができるツールがあります。

    ウェブサイトのドメイン名の選択のためのヒントとトリック

    私はしばらく前にビジネスのためのウェブサイトのドメインのためのブレーンストーミングをやっていたし、”Wazz”は非常に興味深い聞こえたことに気づきました。 それは短く、覚えやすいです。 しかし、私はそれをgoogled瞬間、まあ….私は笑いにバースト、私は言わせてください。 イギリスのスラングでは、それは”排尿”を意味しました。 本当に人々は、あなたの研究を行います。

    後に、私は自分の写真サイトに名前を付けたいと思っていました。 私は”密造酒”を分析していました。 それはとても素敵な、ロマンチックな、おとぎ話のように感じました…そうではなかった以外は.それは”違法に蒸留または密輸アルコール”を意味していたようです。

    だから、あなたの命名がユニークで思い出に残るものであり、国際的に行きたい場合は、英語や他の一般的な言語(例:スペイン語)で奇妙な意味を持たないこ あなたが地元のビジネスであれば、これをスキップするかもしれません。

    さて、あなたのWordPressのウェブサイトのドメイン名を選択するための小さなチェックリストを少し見てみましょう:

    • あなたのビジネス/プロダクトのための関連したキーワードのリストを作りなさい。 ユーザーが製品を使用した後にどのように感じるべきかを考えてください。 自然な原料に基づいて皮の製品種目を有することを言おう。 あなたのリストには、”肌”、”ケア”、”安全”、”自然”、”美しい”、”新鮮”などの単語が含まれている可能性があります。 NamelixやNovanymなどのツールを使用して、ドメイン名のアイデアを生成します。
    • 新しく見つかったドメイン名の意味を確認してください。 私はいつもこの”{insert name here}meaning”のようにgoogleしています。 私は辞書の説明で終わります。 次に、Google画像に移動して、それがどのように一致するかを確認します。 多分その名前の歌手、漫画の漫画の名前などがあります。 その場合は、プロセスをやり直す必要があります。
    • FacebookまたはLinkedInでドメイン名を探して、その名前のビジネスページがあるかどうかを確認します。
    • 販売可能なウェブサイトのドメインがあるかどうかを確認します。 多くのサイトでは、”.com”が最高のトップレベルドメイン(TLD)であり、次に”.org”、”.net”、または”.io”が続きます。
    • ドメイン名を購入してください。 これは、GoDaddyなどのドメインレジストラまたはホスティングプロバイダーを介して行うことができます。

    そして、これは私たちの次の章に私たちをリードしています。

    ウェブサイトホスティングを取得

    あなたが今まで訪問したすべてのウェブサイトは、サーバー上でホストされています。 これは催す提供者からのwebホスティングを得る必要があることを意味する。

    私たちはWordPressのウェブサイトを構築していることを考慮すると、あなたはからホスティングプランを選択することができますWordPress.com または他の第三者の催す提供者。

    先に進む前に何かをクリアしましょう。 がありますwordpress.com とwordpress.org。違いは、上のことですWordPress.com ウェブサイトをホストして構築することができます。 からWordPress.org あなたは通常、他の場所でホストされているあなたのウェブサイトのためのテーマやプラグインを取得します。 あなたは比較することができますWordPres.com ここの計画。

    このガイドの仮説は、あなたが本当にブランドを構築し、あなたのウェブサイトを完全に制御したいということです。 これは第三者の催す提供者に行くことを意味する。

    三つの主要なホスティングサービスがあります:共有ホスティング、VPS、およびマネージドホスティング。 最初の状況では、サーバーリソースはより多くのサイト間で分割されます。 長期的には、これらのサイトが成長し、あなたのサイトも成長すると、パフォーマンスの問題が発生する可能性があります。 あなたはVPSサービスや管理ホスティングプランが必要であることを認識するかもしれません。

    だから、ホスティングプロバイダを選択する際には、これを念頭に置いておく必要があります: あなたのビジネス目標はどれですか?

    あなたがVPSホスティングで行く場合、リソースはまだ共有されますが、あなたはそれらをある程度制御することができます。 セキュリティとパフォーマンスの面でも改善が見られます。

    マネージドホスティングは一種の”アラカルト”サービスです。 あなた自身の物理サーバーをすべて自分自身に取得し、パフォーマンスとセキュリティが向上します。

    確かに、物事はこれよりも複雑になる可能性がありますが、私はちょうどホスティングの全体像を描きたかっただけです。

    次に、計画を分析するときは、詳しく見てみましょう:

    • 価格
    • ストレージ
    • サポート
    • パフォーマンス

    一部のホスティングプロバイダーには、ドメイン提供(例:Namecheap)、ウェブサイトビルダー(例:GoDaddy)、電子商取引オプ

    さて、あなたはおそらく今では”HTTP”または”HTTPS”を使用していくつかのウェブサイトに気づいたでしょう。 どうしたの?

    HTTPは現代のウェブの基礎です。 これは、ブラウザとサーバを接続し、要求と応答に基づいて機能します。 さて、余分な”s”は、ウェブサイトへの接続が暗号化され、ウェブサイトと共有されるデータが安全であることを意味します。

    ユーザーがあなたのウェブサイトで支払いをしたり、アカウントにログインしたりしたとしましょう。 ユーザーが入力する情報は非公開になります。 ハッキングから安全。 これは、”Secure Sockets Layer”の略であるSSL技術を介して発生しています。”消費者のために、あなたは彼らのデータとプライバシーを保護することができますので、”HTTPS”信号の信頼を見て。 これは、SSL証明書を取得する必要があることを意味します。

    選択したプランにもこれが含まれていることを確認してください。

    ホスティングプランを取得し、ログインの詳細を設定した瞬間、唯一欠けているのはWordPress自体です。 そこにホスティングプロバイダのほとんどは、あなたが彼らのダッシュボード/ウィザードからWordPressをインストールすることができます。 それはすべて非常に直感的です。

    どのようにあなたのサイトにログインしますか? 簡単なpeasy。 以下に示すように、ブラウザにあなたのウェブサイトのアドレスを入力し、それに”/wp-admin”を追加するだけです。

    WP admin

    WordPressのインターフェースに慣れる

    WordPressのダッシュボードには9つのセクションがあります。 それらを見てみましょう。

    WordPressの設定

    WordPressの一般設定

    このセクションの中には、さらに7つのメニュー項目があります。 ここで行う必要がある最も重要なことを簡単に説明します。

    • “一般”では、サイトのタイトル、キャッチフレーズ、URL、タイムゾーン、時刻&日付形式、および言語を設定できます。
    • “Reading”の下では、どのページがホームページとして機能し、どのページがあなたの”ブログ”であるかをWordPressに”伝える”でしょう。 これは重要なステップです。 また、ページに表示することができますどのように多くのブログの記事を選択しますか、あなたのウェブサイトは、Googleでインデックス化したい場合。
    • “ディスカッション”の下で、ブログコメントの設定を行います。
    • “メディア”内では、メディアライブラリに画像を追加するときに使用するピクセル単位の最大寸法を設定できます。
    • ‘Permalinks”の中でUrlの形式を設定します。
    • プライバシーポリシーのページは、”プライバシー”内で定義できます。

    “設定”パネルにアプローチする最良の方法は、これらすべての項目を入力し、不足している情報を入力することです。 物事は非常に簡単ですので、冷たい足を取得しないでください。 すべての組み立ては30分以下にすることができます。

    WordPressのページと投稿

    あなたが知る必要があるのは、あなたのコンテンツが”pages”または”posts”の中に入るということです。 ここでは、あなたの時間の95%を過ごすでしょう。

    “ページ”は静的です。 “ホームページ”、”サービス”ページ、”お問い合わせ”ページを持つことができ、ポイントを取得します。 ポストの下であなたの最も最近のblogの記事、多分あなたの有価証券を有することができる。 彼らは自動的に一番上にあなたの最新のウェブサイトのコンテンツを配置するため、これらは、動的なページです。

    WordPress dashboard-投稿とページ

    ダッシュボードから”投稿”を選択すると、投稿の作成、すべての投稿の可視化、タグとカテゴリの管理ができます。

    WordPress dashboard-posts

    上記のように”新規追加”を選択するか、”すべての投稿”に移動して”新規追加”を選択すると、新しい投稿を作成できます。

    新しいWordPressの投稿を追加

    同じページで動作します。
    “すべてのページ”または”すべての投稿”に表示されるのは、テーマによってデプロイされたデフォルトのページと投稿です。

    WordPressでページを編集する

    さて、投稿やページを編集するにはどうすればよいですか?

    デフォルトのページと投稿の上にマウスを置くと、編集、クイック編集、ゴミ箱、表示などのオプションが表示されます。 上のスクリーンショットには、”Colibriで編集”もあります。 これは、Colibri WordPress builderを使用してページをカスタマイズできるプラグインをインストールしたためです(ただし、これについては少し後で説明します)。

    WordPress media

    すべてのメディアはここにあります:画像と動画。 ドラッグアンドドロップやアップロードができます。

    WordPressダッシュボード-メディアライブラリ

    投稿/ページレベルからメディアを追加することもできます。 私は後でトピックの詳細をお見せします。

    WordPressのコメント

    4番目のダッシュボードセクションは”コメント”と呼ばれています。 ここであなたの投稿のコメントを管理することができます。 スパムまたはゴミ箱に移動できるスパムコメントのトンを受け取ります。 あなたは、関連するものを承認することができます。

    WordPressのコメント

    「外観」メニュー

    WordPressの外観メニュー-デフォルト

    このレベルでは、次のことができます:

    • テーマを検索し、インストールし、有効化します(詳細は次の章を参照)。
    • ウィジェットをカスタマイズして、サイトのサイドバー、フッター、およびその他の領域にコンテンツのブロックを追加します。
    • あなたのサイトに背景画像を追加します。
    • “テーマエディタ”内でテーマのコードを編集します(開発者の場合のみお勧めします)。

    特定のプラグインを有効にした瞬間、”Appearance”の下にいくつかの新しいメニュー項目が表示されることがあります。 この場合、Skylineテーマを有効にしたため、”SkylineWP設定”の下に設定するオプションが表示されます。 各テーマは、独自の設定が付属しています。

    “プラグインのインストール”は、Skylineテーマによって追加された他の余分なメニュー項目です。 ここでは、Skylineでうまく動作するいくつかのプラグインの推奨事項が表示されます。

    これで次のメニュー項目に進みます。

    プラグイン

    SEOの最適化、SEOの監査、ウェブサイトのセキュリティとバックアップ、テーブル、フォーム、eコマース機能など、テーマだけでは管理できない機能が多 プラグインは、このようなオプションの欠如を補うためにここにあります。

    プラグインをインストール、有効化、無効化する方法についての小さなチュートリアルです。 それはすべて直感的でユーザーフレンドリーです。

    ユーザー

    WordPressユーザー

    このレベルでは、あなたのウェブサイトにアクセスできるユーザーを決定します。 あなたは、あなたのニーズに応じて、貢献者、ゲストの著者、編集者などへのアクセスを与えることができます。

    Tools

    WordPress dashboard-tools

    “Tools”の下には、ツールデータを他のコンテンツ管理システムとの間でインポートおよびエクスポートするオプションがあります。 ブロガー)。

    “Site health”セクションもあり、WordPressの設定や注意が必要な項目に関する重要な情報をいくつかのアドバイスとともに示しています。

    プライバシーポリシーを尊重する必要があるため、ここでユーザーの個人データをエクスポートまたは消去することができます。

    そして、これで、私たちはWordPressのダッシュボードの章をラップしました。

    もっと面白いビジネスに行きましょう。

    WordPressテーマのインストール方法

    このためには、WordPressの管理ダッシュボードに移動し、左のメニューから”外観”をクリックし、”テーマ”をクリックする必要があります。

    WordPressテーマ

    次に、”新規追加”ボタンをクリックします。
    たくさんのテンプレートが表示され、最新、おすすめ、人気、または機能によってフィルタリングできます。

    機能によってWordPressのテーマを選択

    私たちは、非常に独自のMesmerizeとColibriのテーマがトップ20最も人気のあるWordPressのテーマに記載されていると言うことを誇りに思

    テーマを選択した瞬間、”インストール”をクリックし、”アクティブ化”をクリックします。

    WordPressテーマを有効にする

    外観->テーマに戻ると、WordPressテーマを有効にすることもできます。

    インストールプロセス全体については、チュートリアルでも説明しています。

    今、あなたはロックンロールする準備ができています!

    VIA GIPHY

    WordPressウェブサイトを構築する

    WordPressでは、ウェブサイトのデザインは選択したテーマに依存します。 余分なものが必要な場合は、不足している機能を埋めるために何かを見つける必要があるかもしれません。

    通常、すべてのWordPressテーマには、ブログ用とページ用の2つのデザインがあります。 色は限られており、特別なカスタマイズはありません。 これは、特定の時間に、プラグインが便利になることを意味します。

    今、WordPressのテーマは、基本的な機能を備えたテーマカスタマイザを持っています。 彼らは、任意のカスタム機能を必要とし、本当に迅速に自分のサイトを構築したいしない人のための良いフィット感です。 必要に応じて、独自のCSSスタイルを追加できます。 ちょうどあなた自身の視野に一致させるレイアウトがある主題を選ぶことを確かめなさい。

    テーマをカスタマイズするにはどうすればよいですか? >

    WordPressテーマのカスタマイズ

    左側から、変更するものを選択できます: コンテンツ、メニュー、および多く。 右側には、あなたのウェブサイトのプレビューがあります。 鉛筆アイコンをクリックすると、テキストをリアルタイムで変更できます。

    物語の反対側には、WordPressのビルダーがあります。 彼らはあなたが本当にユニークなウェブサイトを構築するのに役立つプラグインです。 あなたは完全にあなたのテーマのレイアウトを変更することができます。

    私たちの場合、SkylineはColibriというビルダーを事前にインストールしていますので、例として使用します。

    テーマのバージョン、無料または有料のバージョンに応じて、あなたは一緒に遊ぶために様々な要素を持っています: ヘッダー、特定のページセクションから、アクションへの呼び出し、タブ、カウンター、アコーディオンなどのより小さなコンポーネ

    外観->カスタマイズから、以前と同じようにテーマを編集するか、以下に示すようにショートカットを取ることができます。

    WordPressウェブサイトビルダーを使用するときのカスタマイザショートカット

    何が変更されますか? あなたは、カスタマイザー内のより多くの機能へのアクセスを取得します。

    CustomizerのWordPressブロックとコンポーネント

    customizerを使用する以外に、WordPressのウェブサイトのカスタマイズのための別のオプションがあります–デフォルトのエディ あなたは、すべての投稿とページの下にある”編集”オプションからアクセスすることができます。 また、新しい投稿やページを追加した瞬間に、デフォルトのエディタ内に直接表示されます(ビルダーが有効になっていない限り)。

    デフォルトのWordPressエディタでページを編集する

    だから、私たちの次の章では、どのようにするかについて詳しく説明します:

    1. WordPressのページビルダーを使用してWordPressのウェブサイトを作成します
    2. デフォルトのWordPressエディタを使用してWordPressのサイトを作成します

    A.無料のウェブサイ ヘッダー、ページコンテンツ、フッター、ナビゲーションメニュー、グローバル、個々のスタイリング、あなたはそれに名前を付けます:あなたはすべてをカスタマイズすることができるようになります! デザインやコーディングのスキルは必要ありません!

    これは通常、ドラッグアンドドロッププロセスです。 そして、あなたはモバイルデザインを心配する必要はありません、ビルダーは、応答性の側面をカバーしています。

    カスタマイザでウェブサイトの設定を調整する方法

    左側のパネルを見てください。 今、”一般設定”まで下にスクロールします。

    WordPressの一般設定-WordPress builderパネル

    ここで設定できます:

    • あなたのウェブサイトの名前。
    • あなたのウェブサイトの全体的な配色とタイポグラフィ。
    • ブログ、ヘッダー、フッター用のテンプレート:使用する背景、間隔、境界線、影など。
    • 間隔:内側のボタン、列など。
    • カスタムCSSスタイリング

    ビルダーを使用してWordPressでコンテンツを作成する方法

    前述のように、新しいwebサイトページを作成する場合は、「ページ」に移動し、「新規追加」を選択します。 あなたはあなたのページに名前を付けるデフォルトのWordPressエディタに指示されます。 次に、”Colibriで編集”を選択します。

    既存のWordPressページを編集したい場合は、”Colibriで編集”をクリックするだけです。

    WordPressのウェブサイトビルダーを使用するときのカスタマイザショートカット

    WordPressのページにセクションを追加する方法

    左側のパネルにあるすべての”+” あなたが空想のデザインを見つけるまで下にスクロールするか、単にカテゴリを入力することができます。 ヒーローアクセント、約、機能、コンテンツ、アクション、ブログ、カウンター、ポートフォリオ、フォトギャラリー、お客様の声、クライアント、チーム、連絡先、F.A.Q.、および価格設定:ここではColibriビルダーで利用可能なカテゴリがあります。

    WordPressページにブロックを追加する

    これらは事前定義されたテンプレートで、選択した配色に一致します。
    いずれかのブロックを選択し、ブロックに表示される”+”記号をクリックすると、ブロックはページの下部に配置されます。

    左側のパネルからセクションをドラッグアンドドロップすることで、好きな場所に移動できます。
    ワードプレスのブロックの移動方法

    “空白”ブロックのオプションもあります。

    ワードプレスの空白ブロック

    これは、あなたが合うが、それらをカスタマイズすることができることを意味します。 最終的には、後で使用するためにデザインを保存することもできます。

    各セクションの右上隅にある設定アイコンから、行ごとの項目数を調整したり、項目の並べ替え、新しいブロックの追加、セクション全体の削除を行うことができます。

    ブロックレイアウトの変更

    WordPressページのセクションをカスタマイズする方法

    セクション内のテキストを変更したい場合は、セクション自体

    ボタン上のテキストではインライン編集はできません。 それらは左側のパネルで管理されます。

    あなたのサイトから画像を変更したい場合は、それはすべて直感的です。 あなたのイメージを選択することから始めます。ワードプレスの画像

    左のパネルの中でも見ることができます。 画像をクリックしてください。 画像をアップロードするか、ライブラリから画像を選択するように求める新しいウィンドウが表示されます。 アップロードを選択した場合は、ドラッグアンドドロップでアップロードできます。

    WordPressに画像をアップロード

    今、私が言及したパネルに戻って、それは3つの主なオプションがあります:レイアウト、スタイル、および高度な。 右側のwebサイトのプレビューからセクションを選択すると、そのセクションの対応するパネルが表示されます。

    WordPressのセクションとブロックのカスタマイズ

    それらを一つずつ取ってみましょう:

    • レイアウト

    パネル構造

    ここでは、構造レベルでコンテナの幅と高さを調整することができます。 . 簡単に言えば、コンテナはブロックが占める実際のスペースです。 コンテナ内に、コンテンツ(テキスト、画像)を配置します。

    コンテンツの間隔を調整したり、コンテンツが上下にどれだけ近いかを調整したりすることもできます。

    ブロック内に新しい行を追加することもできます。

    セクションのスタイル設定

    このレベルでは、ブロックの背景をカスタマイズしたり、仕切りを追加したりできます。 ディバイダーは、ウェブサイトのセクションが終了または開始されたときに信号を示す視覚的な手がかりです。

    </p></p></p></p></p>

    • アドバンス

    高度なブロックとセクションWordPressの編集

    ここでは、人々、楽しみが来る!

    タイポグラフィや間隔から応答性まで、これはあなたが最小のウェブサイトの詳細に入ることができる場所です。

    要素の状態に応じて、normalまたはhoverのバリエーションを作成できます。

    ブログ内の特定の要素を選択すると、見出しを言うと、同じパネルが左側に表示されます。

    見出しの編集

    これは、編集をより細かくすることができることを意味します。

    見出しやより細かい要素といえば、これらは”コンポーネント”と呼ばれています。 のは、あなたが彼らと遊ぶことができる方法を見てみましょう。

    WordPressサイトでコンポーネントを使用する方法

    コンポーネントは、見出し、スライダー、分周器、ボタン、カルーセル、価格などを参照しています。 ブロックと同じ方法でアクセスすることができます。 彼らは並んで座って、彼らはドラッグアンドドロップ機能を持っています。 Colibriは40の部品を提供する。

    WordPressコンポーネントの追加
    前述のように、”レイアウト”、”スタイル”、または”詳細設定”に移動すると、左側のパネルから調整できます。

    モバイルの応答性

    マルチデバイスの世界では、完全に応答性の高いウェブサイトを持つことが不可欠です。 デフォルトでは、Skylineはモバイル対応のテーマです。 これは、そのセクションは、様々なデバイスに応じて調整されることを意味します。 あなたのWordPressサイトは、タブレットやモバイル上でどのように見えるかをプレビューしたい場合は、左下のコントロールで遊んでいるとき、あなたは、そうす

    WordPressサイトをレスポンシブにする

    モバイル上の特定の機能を非表示にするように選択することもできます。

    WordPressカスタマイザでメニューを作成する方法

    さて、あなたのページを設計し、メニューに追加する必要があるとしましょう。 右側のパネルでは、あなたのサイトのように、上から下に順序付けられたすべてのセクションを持っています。 フッターはあなたの最後のセクションです。 その下には、いくつかの追加機能が表示されます。

    WordPress customizerでのウェブサイトメニュー作成

    ここでメニューを作成できます。

    “新しいメニューを作成”を選択した後、あなたのメニューに名前を付け、それのための配置(ヘッダー、フッター、ページなど)を選択するようになります。).

    “次へ”を選択すると、”項目を追加”オプションからメニューにページを追加することができます。 それはこれよりも簡単に得ることはできません。

    WordPressのウェブサイトメニューに項目を追加する

    WordPressのウィジェットを操作する方法

    ウィジェットは、サイトのサイドバー、フッター、およびその他の領域に追加できるコンテンツのブロックであることをすでに述べました。

    WordPress builderプラグインを使用する場合、フッターレイアウトを事前に設計しているため、WordPressのサイドバーにのみウィジェットを使用します。

    通常、サイドバーはブログページで使用されます。 各テーマには、検索バー、最近の投稿、コメント、ソーシャルウィジェットから画像やビデオまで、さまざまなウィジェットオプションがあります。 あなたがサイドバーにあなたのInstagramのプロフィールを表示したいとしましょう、そのためのInstagramのWordPressのウィジェットがあります。

    ワードプレスのブログのためのサイドバーのウィジェット

    WordPressのウィジェット

    私のお気に入りのウィジェットの一つは、カスタムHTML編集を可能にするものです。 私はそれが本当に強力だと感じています。

    これは言われて、あなたはちょっと終わった。 おめでとう、あなたのWordPressサイトが起動して実行されています!

    さて、WordPressでサイトを構築するための他の方法をチェックしてみましょう。

    デフォルトのWordPressエディタ(Gutenberg)を使用してWordPress webサイトを構築する方法

    私はこれを本当に速くするつもりです。 このエディタはWordPressではまだ新しいものです(2018年12月以降のデフォルトのWordPressエディタです)が、コミュニティの貢献のおかげで継続的に進化しています。

    古典的なWordPressエディタは次のようになりました:

    クラシックWordPressエディタ

    今、私たちは持っています:

    デフォルトのWordPressエディタ

    今、あなたが知る必要があるのは、すべてのテーマがこの新しいエディタと互換性があるわけではないということです。 あなたは一つのグーテンベルク準備ができて見つける必要があります。

    デフォルトのWordPressエディタでのレイアウトデザインは制限されています。 また、ブロックに基づいています。 見出し、画像、ボタン、ビデオなど:今、あなたはおそらく前の章で見つけたように、ブロックはほとんどすべてのものにすることができます。

    Gutenberg editorのブロックマネージャー

    さて、なぜ私はトピックを主張していないのですか:Gutenbergのレビューをチェックすると、最新のレビューは1つ星です。 それは良い経験ではありません。 それはすでに打ち上げから2年、そして途中で多くのアップデートをされている場合でも、これはまだ初期段階にあります。 WordPressは、編集体験を進化させるために、新しいブロックを作成するためにコミュニティに依存しています。

    現在、このツールはテキストエディタのように動作し、スタイリング面では低消費電力です。

    Kadenceのようなツールがありますが、それはあなたを助けることができますが、私たちはまだそこにいません。

    重要なWordPressのプラグインをインストール

    WordPressのエコシステムは、テーマとプラグインで構成されています

    機能を拡張したり、あなたのウェブサイトに新機能を追加することができ、そこに利用可能なWordPressのプラグインの数千があります。

    これは、プラグインをインストールする方法についての非常に短いチュートリアルです。

    私たちのプラグインの推奨事項

    プラグインの種類 それは何ですか 推奨
    WordPress builder テーマのドラッグアンドドロップ機能を提供 Colibri
    SEO WordPressのプラグイン それが有機的にランク付けするのを助けることができる最小限のウェブサイトの変更 Yoast SEO
    Forms WordPressプラグイン 貴重なユーザーデータをキャプチャするためにformsを使用します(もちろん、彼らの同意を得て)。
    電子メールのマーケティング あなたの契約者および顧客と連絡をとるために販売運動を開発しなさい。 ワードプレスのためのMailchimp
    セキュリティプラグイン マルウェアのクリーンアップと不正ログインからの保護。 ジェットパック
    電子商取引WordPressのプラグイン あなたは、オンラインストアを設定するのに役立ちます。
    メディアライブラリマネージャ メディアを整理するのに役立ちます。
    スパム対策 サイトが悪意のあるコンテンツを公開しないようにします。 https://akismet.com/
    Analytics は、トラフィックとユーザーの行動を理解するのに役立ちます。

    ページの速度:今、のは、別のトピックにビットを取得してみましょう。

    あなたの訪問者とGoogleの両方があなたのサイトの速度について多くのことを気にしています。

    なぜグーグル?

    速度は、有機的にランク付けする際に考慮される重要な要素です。:

    Google organic results

    サイトの速度がユーザーにとって、そして最終的にはあなたにとって悪いのはなぜですか?
    まあ、あなたが彼らに悪い経験を提供するなら、彼らはあなたの申し出に関与しないかもしれないし、すぐに戻ってこないかもしれない。

    Googleの2018年の調査によると、モバイルユーザーの53%が3秒以上の読み込み時間がかかるサイトを離れています(Holy Moly!).

    そして、それを見てみましょう!

    ウェブサイトの読み込み

    ページの読み込みはモバイル訪問者にどのように影響しますか(注:バウンスはサイトを離れることを意味します)?
    .
    だから、どのようにこれを修正し、また、あなたのユーザーとGoogleの両方から親指を受け取ることはありませんので、あなたの全体的なウェブサイトのパフォーマ

    私は2つののんびりとした解決策を選んだ(そこにはもっと多くのものがありますが、かなり技術的です)。

    ●画像を最適化
    あなたのウェブサイトの画像は、元のサイズでアップロードするべきではありません。 また、Jpegの代わりにPngを使用してみてください(色が少なくなります)。
    Smushは、画像圧縮のための私たちの好ましいWordPressのプラグインです。 あなたは、品質の任意の目に見える低下を見ることはありませんし、あなたのページの速度が最適化されます。

    ●キャッシュ
    簡単に言えば、キャッシュは後でアクセスするコンテンツのための一時記憶域を提供しています。 あなたのウェブサイトは同じ訪問者によって最初にか5回アクセスされたら別様に荷を積む。

    それはなぜですか?
    ブラウザのキャッシュを扱う場合、ブラウザはウェブサイトからのファイルのコピーをユーザーのデバイス
    (ハードドライブ、携帯電話)に保存します。 Webサイトがキャッシュされると、ブラウザはページの新規または更新された部分をロードするだけで済み、新しいサーバー要求を開始する必要はありません。 “戻る”ボタンをクリックすると同じことが起こり、ブラウザはキャッシュからページを表示します。 これは
    も非常に便利です遅いインターネット接続を扱うとき、ページがすぐにロードされます。

    キャッシュの仕組みについてもっと理解したいですか? ここで読む。

    ここで推奨するツールは次のとおりです。
    ➔W3Total Cache(W3TC)は、ウェブサイトのパフォーマンスを向上させ、ロード時間を短縮することにより、サイトのSEOとユー
    これには、Javascript、HTML&CSSファイルの圧縮など、私たちが愛するいくつかの追加機能もあります。

    今、どのようにあなたのウェブサイトがロードされているどのくらいの速を確認することができますか?
    Googleはそれを支援するためのツールだけを持っており、いくつかの修正アイデアも提供しています。

    ボーナス:UXデザインのヒントとトリック

    私はWordPressのページビルダーで”空の限界”と言って覚えていますか?

    まあ…常に”but”があります。 ウェブサイトを設計するとき心であなたの
    聴衆、かバイヤーのpersonasを常に有するべきである(marketersが言うのを好むように)。 あなたは彼らにあなたのウェブサイト上で素晴らしい経験を提供する必要があります、それはUXが(ユーザーエクスペリエンス)の略です。

    さて、そのためには、摩擦のないユーザーエクスペリエンスを提供するために従うべき一定のルールがあります。

    ユーザーのニーズを満たす
    ウェブサイト上のユーザーはあまり考えたくありません。 彼らは、スキミングし、簡単に理解することができる有用な情報が必要です。 それらは多くのかちりと言う音または多くから成っている経験を前後に必要としない。

    人々は即座の満足を求めています:彼らが必要とするものを迅速かつ容易に見つけること。 これはあなたのウェブサイト上で起こっていない場合、彼らは別のものを探します。

    ビジュアル階層

    すべてのウェブサイトの部分が均等に扱われるわけではなく、一部は他の部分よりも重要です(フォーム、ボタン、見出し、価値提案など)。).

    あなたのユーザーはどこに着陸しますか? どこでクリックして欲しいの?

    彼が望むものを達成するのを助けるために視覚的な手がかりを利用してください。 ページ上のすべての要素は、ツアーガイドとして動作する必要があります。

    視覚的な手がかり

    研究者は、左から右に読むユーザーがZ字型のパターンでウェブサイトをスキャンすることを発見しました。

    zシェイプ

    これは、あなたの最も重要な情報を指示する必要がある場所であることを意味します。

    簡単なナビゲーション

    ナビゲーションバーをシンプルに保つ必要があります。 ユーザーが可能性に圧倒されると、逆説的な選択の状況になる可能性があります。

    ページは、ナビゲーションがスムーズになるように内部的に他の関連ページにリンクする必要があり、ユーザーは前のページに到達するために何度も”戻る”をクリッ

    空白を使用します。 空白を使用すると、情報を消化可能なコンテンツ領域に整理できます。 これにより、ユーザーはより快適に感じ、大量のデータに圧倒されません。

    同じ配色(一貫性)

    あなたのウェブサイト上の超暗いまたは超強烈な色を避けてください。 彼らはユーザーを離れて送信する可能性があります。 あなたのウェブサイトの重要な側面を強調するために強い色を使用することができます。

    色の一貫性

    均等にバランスされた色を使用します。 ここでいくつかのインスピレーションです。

    そして、次のUXデザインの原則に進む前にもう一つ。 色は世界中に意味を持ち、様々な感情につながっています。 このインフォグラフィックは、トピックに光を当てます。

    カラーエモーションガイド

    効果的な書き込みを使用

    誇張してコピーをクリックしないでください。 常識で書いて、自然言語で、専門用語を使用しないでください(誰もが特定の技術的な言葉に精通しているわけではありません)。

    clickbait

    maxを使用します。 最大3ポイントサイズの3書体—スマッシングマガジンが推奨するように、テキストの行あたり18ワードまたは50-80文字の最大。

    社会的証拠を使用

    なぜ私はあなた、あなたのビジネス、またはあなたの製品を信頼する必要がありますか?
    私たち人間は社会的な生き物です。 私たちは地域社会に住んでいて、友人や家族がいます。 彼らは私たちの影響力になることができます。 私たちは彼らの意見について多くのことを気にしています。
    .<9559><9559>●評価-レビュー<8240><5033><1720>評価

    ● お客様の声

    お客様の声

    ● いや クライアントの(”あなたは良い会社にいる”)。

    clients
    ● クライアントのロゴ

    ロゴ
    ●結果に裏打ちされたケーススタディ

    ケーススタディ
    ●プレスフィーチャーと賞

    プレス

    プレス

    デザイントレンド、沿岸の創造的な人々は、トピックに関する素晴らしいインフォグラフィックをしました。

    ラップと呼ぶことができると思いませんか?

    私たちは、情報であなたを圧倒するのではなく、短い道を行きたかったのです。 しかし、最終的には、悪魔は細部にあります。 ヘリコプターの景色を見せた

    問題は、あなたのウェブサイトを2時間以内に稼働させることができるということです。 しかし、追加したい機能、ページ、コンテンツが多いほど、時間がかかります。 そして最も最近の網の設計傾向を無視しないで下さい。

    最後に、あなたがDIYタイプであれば、あなたは間違いなくスピンのために私たちのColibriビルダーを取る必要があります!

    ここでは、機能のトンを使用してWordPressのウェブサイトのページを構築する方法についてのビデオです。

    さて、この記事が好きで、WordPressのウェブサイトをデザインする方法についてもっと知りたい場合は、Youtubeチャンネルを購読し、TwitterやFacebookでフォローしてくださ

Leave a Reply

コメントを残す

メールアドレスが公開されることはありません。