トップページ修正

HP作成

トップページを修正しました。

今までの問題点
  • 殺風景
  • サイドバーがぐちゃぐちゃ
  • 写真をとりあえずで埋めていた

上記のような問題を抱えていた為、何点か修正を加えました。

✅今回の変更点
  • 新着情報が出るようになった
  • サイドバーの順番を入れ替えた
  • Twitter連携してツイートを表示されるようにした
  • ブロックの上下に装飾
  • フッターにメニューを追加した
  • プロフィールが表示されるようになった
スポンサーリンク

新着情報が出るように

僕の場合はプラグインの

What’s New Generator

を使用しています。

プラグインをインストールすると

設定内に追加されます。

ここを開くと

  • タイトル(表示される文字)
  • タイトルのタグ(タイトルをどの見出し設定で表示させるか)
  • 表示するコンテンツ
  • カテゴリーのスラッグ(僕は空白)
  • 表示順序
  • 表示件数(1~30件まで)
  • NEWマーク表示期間(0~30日まで)
  • 最近記事にNEWマークをつけるか

を設定することができます。
プレビューも表示されるので、そちらで表示も確認してみてください。

僕は「NEW」の表示が無いと少し寂しく感じるので、NEWマークは3日まで表示させています。

その後、What’s New Generator 設定の1番上にある「ショートコード」を好きなところに貼り付けてみましょう。
するとプレビューで表示された情報が表示されます。


サイドバーの順番入れ替え

サイドバーの順番が変だった、要らないものが入っていたので整頓しました。

外観内のウィジェットで変更できます。

ぱっと見はわかりづらいのですが、

表示されるのは右半分ですね。
サイドバーから右の部分。

左の部分は表示させる素材と考えるとわかりやすかったです。

赤枠

サイドバーに表示されるものです。
サイドバーに、左のウィジェットからドラッグして運んでいきます。
そうすると運んで行ったものが追加されます。

青枠

青枠で囲ってある部分をドラッグして上下に移動させることで表示させる順番が変わります。

クリックすると詳細設定をすることができます。
どのページで表示させて、どのページで表示させないかを選択することができます。
各ウィジェットによって詳細は異なるので色々試してみてください。
左下の「削除」をクリックで削除可能です。


Twitter連携してツイートを表示

Twitterで呟いたことがHP内に表示されるようになりました。

下のURLへ接続

Twitter Publish

そこで自分のTwitterのurlを入力します。

僕の場合は
https://twitter.com/shiroinu0126」ですね。

入力後、下の項目を選ぶのですが、
内容を表示させたい場合は左の「Emvedded Timeline」を選択します。
すると下にコードが表示されるのでそれをコピーして、
表示させたい場所に貼り付けるとOKです。

コード発行する前に設定で「高さ」を「幅」設定できます。
発行されたコードのwidthやheightをいじってもOKです。


ブロックの上下に装飾

青いうねった上下のライン。

こちらプラグインの「Elementor」使用しました。

編集したい固定ページを選択し

「Elementorで編集」をクリック

まず装飾したいブロックを選択し、

赤枠の真ん中の部分をクリックします。

そして画面左。

「スタイル」の「シェイプ区切り」を選択します。

「上」をクリック

上の青いラインは「タイプ」、「シェイプ区切り」で作成しています。

色を選択します。

このような画面になります。
色を選択して上のパレットの「+」を押すと色を保存できます。
上下の色を合わせたい場合は「+」しておきましょう。

幅、高さでラインの太さやデザインを変更できるので色々試してみましょう。

まだ機能調べきれていないので色々触ってみます。


フッターにメニューを追加した

こちらは画面左メニューの「外観」→「カスタマイズ」です。

「外観」→「メニュー」でもできるのですが、こっちの方が分かりやすく感じたのでこちらにしました。

現在使用しているメニューと同じものを表示させたい場合は

現在表示しているメニューを選択して

下のほうにある「メニューの位置」

のチェックボックス内の

「フッターメニュー」にチェックを入れればOKです。


プロフィールが表示されるようになった

サイドバー順番入れ替えの時と同様、ウィジェットをいじります。

「利用できるウィジェット」内に「プロフィール」があるのでそれを表示させたい場所にドラッグさせていき(今回はサイドバーに入れました。)

初期の表示設定だと非表示になっているので

「表示設定」で

表示させるページを指定してあげる必要がありました。

固定ページのIDは固定ページ一覧で確認することができるのでそちらで確認しましょう。


カテゴリー一覧が表示されるようになった

こちらも「Elementor」での編集を利用しました。

左に表示されているメニューの中、

下のほうにいくと「WORDPRESS」という項目があります。
クリックすると一覧が表示されます。

その中の「カテゴリー」を挿入したい場所へドラッグして持っていくと

カテゴリーが表示されるようになります。

表示させるカテゴリーも左のメニューで選択できます。


まとめ

今回はこんな感じに手を加えてみました。

✅今回の変更点
  • 新着情報が出るようになった
  • サイドバーの順番を入れ替えた
  • Twitter連携してツイートを表示されるようにした
  • ブロックの上下に装飾
  • フッターにメニューを追加した
  • プロフィールが表示されるようになった

まだまだ見栄えをよくするためにしないといけないこと沢山あると思うのでやります。

コメント