ごけたです
「ブロックエディタ」と「クラシックエディタ」を選択する際
ウィジェットは大きな割合かと。
ただ慣れてしまえばさして問題ではありませんした。
目次
はじめに
今回は「Wordpress」編です。
WordPressの公式テーマの1つ「Twenty Twenty-One」について書いているシリーズ。
ブロックエディタ編
ここでは「ウィジェット」の設定について書いてみました。
その2として「段落(テキスト)」にリンク設定を行ってみました。
実際に変更表示してる「Twenty Twenty-One」は上記のサイトでご確認できます。
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
Wordpressは5.8.2でスタート、公開時は5.9.3です。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
「テキスト」の代わりとして「段落」を使用
「ブロックエディタ」設定では
「クラシックエディタ」のウィジェットにあった
「テキスト」の設定表示がありません。
「テキスト」の代わりとして「段落」と使用。
リンク設定を行います。
ウィジェット画面の表示
![]()
左メニュー一覧から「外観」→「ウィジェット」の順で選択クリック。
ブロックの追加
![]()
ウィジェット画面一番下の「青枠」か
右下の「+」をクリックしてブロックを追加します。
検索枠内に「テキスト」と入力
![]()
何のブロックを追加するのか検索枠で「テキスト」と入力します。
「テキスト」と入力してもブロックエディタには「テキスト」はないので表示されません。
その代わりになる「段落」をクリックします。
※段落は投稿文の通常の入力ブロックになります。
テキストが無いので入力できるブロックを使用するしかありません。
「段落」でリンクの設定
「段落」のブロックエディタが追加されたら
リンク用のタイトルを入力します。
ここでは「Google」をリンクとして使用します。
※先に「Google」のサイトからURLをコピーしておきます。
![]()
ブロック欄に「Google」と入力
「Google」をカーソルで選択反転させます。
上部にメニューが表示。
「リンク」アイコンをクリックします。
URLの設定
「リンク」ウィンドウが表示されます。
一番上の空欄に「Goolge」の「URL」をペーストします。
※「Google」と文字入力も可能ですがリンク先が「jp」になるとは限りません。
一番下の「新しいタブで開く」のボタンを右側にスライドさせます。
※ここはお好みで設定してください。
最後に真ん中の枠内にカーソルを合わせてクリックします。
![]()
リンク設定が完了するとタイトルにアンダーバーが追加表示されます。
設定の確定
表示、リンクの動作確認
![]()
画面左上の「サイト名」にカーソルを合わせて
「サイトを表示」をクリックします。
![]()
フッターまで画面をスクロール。
リンク設定した「Google」をクリックして
新しいタブでGoogleが表示されば設定は完了です。
リンクを複数
![]()
同じ設定方法で「段落」でリンク設定を増やした場合、
新たに追加したリンクを先に表示した場合は
新しいブロックをクリックして上部メニューを表示。
矢印アイコンの「^」をクリックして移動させます。
![]()
右上の「更新」ボタンをクリックして設定を確定します。
表示確認
![]()
画面左上の「サイト名」にカーソルを合わせて
「サイトを表示」をクリックします。
フッターまで画面をスクロール。
PC画面ではカテゴリーやタグのような括りの設定がないのでがないので
個々に分かれて表示されます。
「段落(リンク)」をまとめて表示
PC画面では段落が別々で表示されます。
アーカイブ、カテゴリーのようにまとめて表示する方法です。
まとめて選択反転
![]()
リンク設定した段落の2つをカーソルで選択反転させます。
上部メニューが表示されたら右隅の「オプション」をクリックします。
「グループ化」をクリック
![]()
上部メニュー右隅の「オプション」をクリック後
プルダウンメニューから「グループ化」をクリック。
![]()
選択した段落がグループ化させれると
ブロック(青枠)が1つして表示されます。
設定の確定
表示確認
![]()
画面左上の「サイト名」にカーソルを合わせて
「サイトを表示」をクリックします。
フッターまで画面をスクロール。
リンク設定した段落がまとめって表示されていれば完了です。
「グループ化」の解除
![]()
「グループ化」を解除したい場合は
グルーパ化した段落をクリック。
上部メニュー右隅の「オプション」をクリック。
プルダウンメニューから「グループ解除」をクリックします。
最後に右上の「更新」ボタンをクリックして設定を確定します。
これで「グループ」が解除され、個々に表示されます。
プラグイン「WordPress Popular Posts」の表示
プラグイン「WordPress Popular Posts」はインストール、有効化済みの状態で進行します。
ウィジェット画面の表示
![]()
左メニュー一覧から「外観」→「ウィジェット」の順で選択クリック。
ブロックの追加
![]()
ウィジェット画面一番下の「青枠」か
右下の「+」をクリックしてブロックを追加します。
検索枠内に「WordPress Popular Posts」と入力
![]()
「WordPress Popular Posts」と入力。
検索結果から「WordPress Popular Posts」ブロックをクリック。
設定画面
![]()
設定画面が表示されます。
設定を行ったのは赤枠のみです。
設定項目はまだありますがこれだけです。
設定の確定
表示確認
![]()
画面左上の「サイト名」にカーソルを合わせて
「サイトを表示」をクリックします。
フッターまで画面をスクロール。
「アクセスランキング」のタイトルが表示されているか確認します。
※アクセス数が少ない内は表示せずに、左メニュー一覧の
「設定」→「WordPress Popular Posts」をクリック。
アクセス数を確認。
サイトに表示してもいいと思った段階で再度表示設定がいいかと。
さいごに
「テキスト」の代わりとして「段落」を使用。
リンク設定を行いました。
「Twenty Twenty-One」ではフッターに表示されます。
ご自分の投稿がPC向き、スマホ向きかによっては
段落(テキスト)表示も効果がない場合も。
最後までお合い下さいまして有難うございました。