当サイトにはアフィリエイト広告が含まれます。
なおレビューは私の感想を書いており、内容を指示するご依頼はお断りしています。(Noステマ宣言)

高コスパなゲーミングPCなら、
私も使うG-GEARの即納モデルがおすすめ!

マリオの映画がAmazonの見放題に登場!

Meta Quest3 好評発売中!
Meta / Amazon / 楽天 / メルカリ

【おすすめメタクエスト記事】

【50項目以上】メタクエストの機能・設定・小ネタまとめ
メタクエスト ジャンル別おすすめ 無料ゲーム・アプリ (記事:【Meta Quest】おすすめ無料ゲーム・アプリ30選!無料でこれだけ遊べる!)
100均グッズでも充分?Questを快適にしよう! (記事:【100均も活用】Quest2・3おすすめアクセサリー&グッズまとめ【快適性と没入感をアップしよう!】)
映画を観るなら「VRゴーグル」か「プロジェクター」か?(記事:【大画面で映画】プロジェクターかVRゴーグルか、デメリットを理解して選ぼう!)

Cocoonで「この記事を書いた人」をプラグインなし・PHP編集なしで好きな場所に表示する方法

2022年11月19日

Writter: むねりょ

 

対面コミュニケーションは苦手なので、文字でのコミュニケーションに活路を見い出し、日本語の奥深さにハマる。制限がある中「工夫して問題を解決をする」のが好きで、その過程で見つけた役立つ知識を発信します。VRは最新技術にも触れ合えるし、コミュ症でも世界中の人と会える最高の技術です!皆さんとVRで会えることを楽しみにしています!(でもコミュ症なので、一緒にVRゲームとかから始めましょうね)

有名なテーマには記事内に「この記事を書いた人」(プロフィール情報)を表示させる機能が備わっています。

しかし表示できる場所はテーマにより決められており、本当の意味で記事内の好きな場所に表示させることは出来ません。

しかし「カスタムHTML」ブロックを使用することにより、テーマ標準と同じスタイルの「この記事を書いた人」(プロフィール情報)好きな位置に表示させることができます!

作業の流れ

  • テーマ標準の機能で「この記事を書いた人」を表示させる
  • 「この記事を書いた人」のソースコードを探し出してコピーする
  • 「カスタムHTML」ブロックを使用して「この記事を書いた人」を表示させる!
むねりょ
むねりょ

無料テーマ「Cocoon」と 有料テーマ「AFFINGER6」で表示できることを確認しています。
他のテーマでも同様の手段で表示できるかと思います!

   

AFFINGER6の方はコチラ!

前置き:少しの知識とトライ&エラーが必要です

今回の方法は大まかに説明すると「コピーして貼り付けて終わり!」なのですが、残念ながら「これをコピーしてください!ここに貼り付けてください!」で出来る方法ではありません。

Cocoonのバージョンや、「この記事を書いた人」に画像など何を表示させているかで一人ひとり状況が変わってしまうからです。

その代わりに手順を一つ一つ説明しますので、ゆっくりお付き合いいただければと思います。

またPHPの編集はしませんので、失敗したらワードプレスが壊れるという心配はありません。

むねりょ
むねりょ

プラグインは極力入れたくない!でもPHPを触るのは怖い!という方、ぜひチャレンジしてみてください。

  

手順1:Cocoon標準の機能で「この記事を書いた人」表示させる

Wordpress Theme「Cocoon」

まずはウィジェットを設定して標準機能で「この記事を書いた人」を表示させます。

「この記事を書いた人」の編集

「この記事を書いた人」に記載されるプロフィール情報は、次の手順で編集できます。

  • ダッシュボードの左メニューから ユーザー → ユーザー一覧 をクリック
  • 変更したいユーザーの「編集」をクリック
  • 編集画面の真ん中あたりにある「プロフィール情報」欄を編集する
  • 一番下にある「プロフィールを更新」をクリックする
「プロフィール情報」入力場所の説明

  

①ウィジェットの編集画面を開く

ダッシュボードの左メニューから 外観 → ウィジェット の順にクリックします。

メニュー「ウィジェット」の位置説明

  

②ウィジェットにプロフィールを追加する

今回は例として、「投稿本文下」に「この記事を書いた人」を表示させます。

<[C] プロフィール> を「投稿本文下」にドラッグ&ドロップします。

ウィジェットにプロフィールを追加する方法の説明

③「この記事を書いた人」が表示されているか確認する

好きな記事の本文下を確認し、最後に「この記事を書いた人」が表示されていることを確認します。

標準機能を使って「この記事を書いた人」を表示させたときの表示例

  

手順2:「この記事を書いた人」のソースコードをコピーする

続いてブラウザのソースコード表示機能を利用して、「この記事を書いた人」を表示させるソースコードを探し出してコピーします。

むねりょ
むねりょ

今回はChromeブラウザを例に説明します!

  

ソースコードとは

ソースコードとは、簡単に言うと「どんな処理をするか?」が書かれた「プログラムの設計図となるテキスト」のことです。
今回は、Webページのソースコード<HTMLタグ>から「この記事を書いた人」の設計図となる部分をコピーします!

  

①ページのソースを表示する

手順1の最後で確認した、「この記事を書いた人」が表示されているページ上で右クリック し、「ページのソースを表示」をクリックします。

ページのソース表示方法の説明

  

②「この記事を書いた人」の始まりの部分を探す

まずソースコードの知識として、Webページのソースコードは基本的には左上から右下の「Z」の形で記述されています。

ソースコード記述がブラウザに表示された時の記述の流れの説明

「記事ページの内容」と「ソースコード」は必ず連動しています!

なので、「この記事を書いた人」の始まりがどこか目星をつけるため、まずは本文の内容が書かれている場所を探します。

ソースコードで見る、「この記事を書いた人」の本文表示例

  

この本文の近辺に「この記事を書いた人」の始まりが存在します。

本文の少し前を見ると、author_box-3というそれらしい表記がありました。

ソースコードで見る、「この記事を書いた人」の記述始まりの例

  

HTMLタグは<>で囲むというお約束があるので、この「author-box-3」が含まれている<div id="author_box-3" ...>「この記事を書いた人」の始まりということが推測できます。

Cocoonのバージョンや設定によっては、「author_box-3」と表記が違っているかもしれません。
ただ、著者を意味する「author」という言葉は必ず入っているかと思いますので、これをヒントに探してください!

ソースコードで見る、「この記事を書いた人」の記述タグ全部の例

  

③「この記事を書いた人」の終わりの部分を探す

続いて「この記事を書いた人」の終わりを探します。

むねりょ
むねりょ

ここが一番難しいポイントですので、丁寧に説明しますね。

  

再度ソースコードについて確認しましょう!

手順2-②でも書きましたが、Webページのソースコードは基本的には左上から右下の「Z」の形で記述されています。

ソースコード記述がブラウザに表示された時の記述の流れの説明

  

なのでまず、「この記事を書いた人」の一番最後にあるのは何かを確認しましょう!

「この記事を書いた人」の最後に表示されているもの(RSSフィードボタン)

  

今回の場合、最後にあるのはRSSフィードのボタンです。

ここにマウスカーソルを合わせると「RSSで更新情報をフォロー」という文字列が表示されます。

「この記事を書いた人」の最後に表示されているRSSフィードボタンのタイトル表示

  

さらに加えて、「この記事を書いた人」の次に表示されているものも確認しておきましょう!

「この記事を書いた人」の次に表示されているもの(Uncategorized)

「Uncategorized」(カテゴリータグ)が表示されています!

  

「この記事を書いた人」の最後にあるものと、次に出てくるものをヒントにソースコードで「この記事を書いた人」の終わりとなる部分を探し出します!

実際のソースコードで確認しましょう。

ソースコードで見る、「RSSフィードボタン」の記述

手順2-②で見つけた<div id="author_box-3" ...>少し先を探すと「RSSで更新情報をフォロー」という表記が出てきました。

「Uncategorized」という表記は出てきませんが、すぐ下<div class="entry-categories-tags ctdt-one-row">という、カテゴリータグの何かを示す表記が出てきました。

  

これで「この記事を書いた人」を示す範囲は以下の通りだと目星が付きました。

ソースコードで見る、「この記事を書いた人」記述全文例

この範囲を右クリック→「コピー」して次の手順に進みましょう!

  

広告

手順3:「カスタムHTML」ブロックにソースコードを貼り付ける

最後に「この記事を書いた人」を表示させたい記事に、先ほどコピーしたソースコードを貼り付けたら完成です!

  

①貼り付けたい記事の編集画面を開く

「この記事を書いた人」を好きな位置に挿入したい記事の編集画面を開きます。

WordPress記事編集画面

  

②「カスタムHTML」ブロックを挿入する

「この記事を書いた人」を入れたい場所に「カスタムHTML」ブロックを挿入します。

WordPress記事編集画面で、「カスタムHTML」ブロックを挿入する方法

  

③ソースコードを貼り付ける

手順2でコピーしたソースコードを貼り付けます。

WordPress記事編集画面で、「カスタムHTML」ブロックにソースコードを貼り付けたところ

  

④「新しいタブでプレビュー」で問題なく表示されるか確認!

右上の「プレビュー」をクリックし、「新しいタブでプレビュー」を押して、実際の表示を確認します。

「新しいタブでプレビュー」の位置説明(WordPress記事編集画面)
むねりょ
むねりょ

「カスタムHTML」ブロックのプレビュー表示で少し表示が崩れていても、気にせず「新しいタブでプレビュー」で確認してみてください。

WordPress記事編集画面で「カスタムHTML」ブロックのプレビューが変な表示になっている例
「カスタムHTML」での表示崩れは気にする必要なし

    

「新しいタブでプレビュー」で「この記事を書いた人」を表示させた例
「新しいタブでプレビュー」で表示に問題が無いか確認!

  

表示がどこかおかしい時

もし表示に問題があれば、手順2のコピーの範囲を変えて再度試してみてください。
少なくとも<div ...>の数と</div>の数が同じ数である必要があります。

といっても、どっちがいくつあるか数えるのは大変だと思うので、手っ取り早い修正は最後にある</div>の数を減らしたり増やしたりしてみることです!
かなり雑な手段なので、上手くいけばラッキーくらいに思ってください)


それでも全く正常に表示できないようであれば、手順2で行ったコピーの範囲をいろいろ変えて試してみてください!

  

「カスタムHTML」での表示が確認できれば、手順1で表示させた「プロフィール」のウィジェットは削除しても構いません。

  

広告

注意点:「ウィジェット」での表示と「カスタムHTML」の表示は連動しません

「カスタムHTML」で作成した著者の情報は、その内容で固定されます。

よってユーザー情報からプロフィール情報を変更しても、「カスタムHTML」内の自己紹介やTwitterなどのリンクは一切変更されません。

プロフィール情報を変更した際には、もう一度ソースコードからコピーして「カスタムHTML」に貼り付ける必要があります。

少しでも変更の手間を減らすためにも、作成した「カスタムHTML」を再利用ブロックに登録することをオススメします!

むねりょ
むねりょ

逆転の発想をすると自己紹介を複数作成できるので、記事の内容に合わせた自己紹介を作成するのもアリですね♪

  

テーマを変更すると、再利用ブロックで使用していた「カスタムHTML」も使えなくなりますのでご注意ください。

  

まとめ:カスタム「この記事を書いた人」で自由に自己紹介しよう!

「カスタムHTML」を利用して「この記事を書いた人」を表示する方法を解説しました。

この方法には、以下2つのメリットがあります。

  • ウィジェットの「カスタムHTML」でも利用できる
  • HTMLで「この記事を書いた人」のデザインやリンク先を自由に変更することが出来ます。

また、同様の手段でほかのテーマでも表示できることを確認しています。
(ただし一部テーマではコピペだけでは正常に表示できないものもありました)

状況はテーマごと、そのサイトの設定ごと「この記事を書いた人」に何を表示させているかにより状況が変わるため、どんな状況でも必ず出来るとは言い切れませんが、プラグインもPHPも変更せずに表示させる有力な方法だと信じています!

むねりょ
むねりょ

参考になりましたら、コメントをいただけると今後の励みになります!

\アニメの「謎の光なし」も見放題/

  

-ブログのコツ
-,