![](https://orentame.com/wp-content/uploads/2022/11/e7ce37df0b64a2af709668a4dbb111c1-1.jpg.webp)
有名なテーマには記事内に「この記事を書いた人」(プロフィール情報)を表示させる機能が備わっています。
しかし表示できる場所はテーマにより決められており、本当の意味で記事内の好きな場所に表示させることは出来ません。
しかし「カスタムHTML」ブロックを使用することにより、テーマ標準と同じスタイルの「この記事を書いた人」(プロフィール情報)を好きな位置に表示させることができます!
作業の流れ
- テーマ標準の機能で「この記事を書いた人」を表示させる
- 「この記事を書いた人」のソースコードを探し出してコピーする
- 「カスタムHTML」ブロックを使用して「この記事を書いた人」を表示させる!
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
「Cocoon」編に引き続き、今回は「AFFINGER6」編です!
なお、この手法は他のテーマでも同様の手段で表示できるかと思います!
前置き:少しの知識とトライ&エラーが必要です
今回の方法は大まかに説明すると「コピーして貼り付けて終わり!」なのですが、残念ながら「これをコピーしてください!ここに貼り付けてください!」で出来る方法ではありません。
AFFINGER6のバージョンや、「この記事を書いた人」に画像など何を表示させているかで一人ひとり状況が変わってしまうからです。
その代わりに手順を一つ一つ説明しますので、ゆっくりお付き合いいただければと思います。
またPHPの編集はしませんので、失敗したらワードプレスが壊れるという心配はありません。
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
プラグインは極力入れたくない!でもPHPを触るのは怖い!という方、ぜひチャレンジしてみてください。
手順1:AFFINGER6標準の機能で「この記事を書いた人」表示させる
![Wordpress Theme「Cocoon」](https://orentame.com/wp-content/uploads/2022/11/action_banar-1024x916.webp)
まずはAFFINGER管理から設定を変更して標準機能で「この記事を書いた人」を表示させます。
「この記事を書いた人」の編集
①「この記事を書いた人」の設定画面を開く
ダッシュボード上部のメニューから AFFINGER管理 → 投稿・固定記事 → この記事を書いた人 の順にクリックします。
![AFFINGER管理から「この記事を書いた人」を表示させる項目位置説明](https://orentame.com/wp-content/uploads/2022/11/29a488df44b2e2ea821338df040a5afe.png.webp)
②「この記事を書いた人」を有効化する
「この記事を書いた人」を有効化する に チェックを入れます。
![有効化する項目の図示](https://orentame.com/wp-content/uploads/2022/11/fb41fd3076c7fd482c4aff6aff921b38.png.webp)
③変更を保存する
右上などにある「Save」をクリックして変更を保存します。
(右上以外の「Save」ボタンを押してもOKです)
![設定の保存ボタン(Save)の場所の説明](https://orentame.com/wp-content/uploads/2022/11/de9f57fab50ac7919aad6b5718393065.png.webp)
④「この記事を書いた人」が表示されているか確認する
好きな記事の本文下を確認し、最後に「この記事を書いた人」が表示されていることを確認します。
![標準機能を使って「この記事を書いた人」を表示させたときの表示例](https://orentame.com/wp-content/uploads/2022/11/de9f57fab50ac7919aad6b5718393065-1.png.webp)
手順2:「この記事を書いた人」のソースコードをコピーする
![](https://orentame.com/wp-content/uploads/2022/11/614168e819af66759dbd70a0726335a7-1024x678.jpg.webp)
続いてブラウザのソースコード表示機能を利用して、「この記事を書いた人」を表示させるソースコードを探し出してコピーします。
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
今回はChromeブラウザを例に説明します!
ソースコードとは
ソースコードとは、簡単に言うと「どんな処理をするか?」が書かれた「プログラムの設計図となるテキスト」のことです。
今回は、Webページのソースコード<HTMLタグ>から「この記事を書いた人」の設計図となる部分をコピーします!
①ページのソースを表示する
手順1の最後で確認した、「この記事を書いた人」が表示されているページ上で右クリック し、「ページのソースを表示」をクリックします。
![ページのソース表示方法の説明](https://orentame.com/wp-content/uploads/2022/11/a077b71f5be285757902cc5e0f0ff145.png.webp)
②「この記事を書いた人」の始まりの部分を探す
まずソースコードの知識として、Webページのソースコードは基本的には左上から右下の「Z」の形で記述されています。
![ソースコード記述がブラウザに表示された時の記述の流れの説明](https://orentame.com/wp-content/uploads/2022/11/8aa9bf3d0625f16c674cbf64f9f1b3b0.png.webp)
「記事ページの内容」と「ソースコード」は必ず連動しています!
なので、「この記事を書いた人」の始まりがどこか目星をつけるため、まずは本文の内容が書かれている場所を探します。
![ソースコードで見る、「この記事を書いた人」の本文表示例](https://orentame.com/wp-content/uploads/2022/11/ea23fabd37c803b226fa17fc1274e37a.png.webp)
この本文の近辺に「この記事を書いた人」の始まりが存在します。
本文の少し前を見ると、st-author_boxというそれらしい表記がありました。
![ソースコードで見る、「この記事を書いた人」の記述始まりの例](https://orentame.com/wp-content/uploads/2022/11/59e0b147d96cc018ab705fff64cd480f.png.webp)
HTMLタグは<>で囲むというお約束があるので、この「st-author-box」が含まれている<div class="st-author-box">が「この記事を書いた人」の始まりということが推測できます。
AFFINGER6のバージョンや設定によっては、「st-author-box」と表記が違っているかもしれません。
ただ、著者を意味する「author」という言葉は必ず入っているかと思いますので、これをヒントに探してください!
![ソースコードで見る、「この記事を書いた人」の記述タグ全部の例](https://orentame.com/wp-content/uploads/2022/11/9d9abf999dfa8739a24902aafee20a58.png.webp)
③「この記事を書いた人」の終わりの部分を探す
続いて「この記事を書いた人」の終わりを探します。
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
ここが一番難しいポイントですので、丁寧に説明しますね。
再度ソースコードについて確認しましょう!
手順2-②でも書きましたが、Webページのソースコードは基本的には左上から右下の「Z」の形で記述されています。
![ソースコード記述がブラウザに表示された時の記述の流れの説明](https://orentame.com/wp-content/uploads/2022/11/8aa9bf3d0625f16c674cbf64f9f1b3b0.png.webp)
なのでまず、「この記事を書いた人」の一番最後にあるのは何かを確認しましょう!
![「この記事を書いた人」の最後に表示されているもの(SNSボタンとホームページボタン)](https://orentame.com/wp-content/uploads/2022/11/44c6d0c329b9d9aaa4f3771132b78534-1.png.webp)
今回の場合、最後にはSNSのボタン と ホームページボタンが並んでいます。
続いて、「この記事を書いた人」の次に表示されているものも確認しておきましょう!
![「この記事を書いた人」の次に表示されているもの(「雑記」(カテゴリータグ))](https://orentame.com/wp-content/uploads/2022/11/5dcc2a9aada78b6c5db27834d82f4ccb.png.webp)
「雑記」(カテゴリータグ)が表示されています!
「この記事を書いた人」の最後にあるものと、次に出てくるものをヒントにソースコードで「この記事を書いた人」の終わりとなる部分を探し出します!
実際のソースコードで確認しましょう。
![ソースコードで見る、各種ボタンのソースコード記述](https://orentame.com/wp-content/uploads/2022/11/25a9288b64b4e37ba92ec0fa2211f484-1024x292.png.webp)
手順2-②で見つけた<div class="st-author-box">の少し先を探すとSNSの名称とホームページが並んでいる表記が出てきました。
さらにその先を確認すると<a href="https://orentame.com/category/others/" rel="category tag">雑記</a>という、カテゴリータグの表記が出てきました。
よってその1つ上の行までが「この記事を書いた人」……と言いたいところですが、1つ上の行にある<p class="tagst">について少し考える必要があります。
知っておいてほしいHTMLの記述ルールとして、<HTMLタグ ...> で始まり </HTMLタグ>で終わるという決まりがあります。
コピーの終わりを<p class="tagst">にしてしまうと、先にある</p>が取り残されてしまいます。
![ソースコードで見る、「この記事を書いた人」の終わり記述絞り込みの注意点](https://orentame.com/wp-content/uploads/2022/11/01a1952d3e0a85ad1ce9c137cbbaa606-1024x106.png.webp)
よってコピー範囲の終わりは、<p class="tagst">より1つ上の行にある</div>までとなります。
これで「この記事を書いた人」を示す範囲は以下の通りだと目星が付きました。
![ソースコードで見る、「この記事を書いた人」記述全文例](https://orentame.com/wp-content/uploads/2022/11/3ec0dea26907f2ea2da03f943ba024d7-1024x497.png.webp)
この範囲を右クリック→「コピー」して次の手順に進みましょう!
手順3:「カスタムHTML」ブロックにソースコードを貼り付ける
![](https://orentame.com/wp-content/uploads/2022/11/wordpress-ge2690f7ae_1920-1024x683.jpg.webp)
最後に「この記事を書いた人」を表示させたい記事に、先ほどコピーしたソースコードを貼り付けたら完成です!
①貼り付けたい記事の編集画面を開く
「この記事を書いた人」を好きな位置に挿入したい記事の編集画面を開きます。
![WordPress記事編集画面](https://orentame.com/wp-content/uploads/2022/11/a74a1579097edee1e788665af9982778-1024x399.png.webp)
②「カスタムHTML」ブロックを挿入する
「この記事を書いた人」を入れたい場所に「カスタムHTML」ブロックを挿入します。
![WordPress記事編集画面で、「カスタムHTML」ブロックを挿入する方法](https://orentame.com/wp-content/uploads/2022/11/7b5a4b3879260de58b81790f03b693c8-1-1024x222.png.webp)
③ソースコードを貼り付ける
手順2でコピーしたソースコードを貼り付けます。
![WordPress記事編集画面で、「カスタムHTML」ブロックにソースコードを貼り付けたところ](https://orentame.com/wp-content/uploads/2022/11/ba5a66b7fef3dcc9d359e96d7a9e2305.png.webp)
④「新しいタブでプレビュー」で問題なく表示されるか確認!
右上の「プレビュー」をクリックし、「新しいタブでプレビュー」を押して、実際の表示を確認します。
![「新しいタブでプレビュー」の位置説明(WordPress記事編集画面)](https://orentame.com/wp-content/uploads/2022/11/bca3206efa2e7bb7baa2b528dc18ad0f-1024x533.png.webp)
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
「カスタムHTML」ブロックのプレビュー表示で少し表示が崩れていても、気にせず「新しいタブでプレビュー」で確認してみてください。
![WordPress記事編集画面で「カスタムHTML」ブロックのプレビューが変な表示になっている例](https://orentame.com/wp-content/uploads/2022/11/c2c8d9b75b188c1b49685c604eb467f6.png.webp)
![「新しいタブでプレビュー」で「この記事を書いた人」を表示させた例](https://orentame.com/wp-content/uploads/2022/11/30e9efa63d0c939cce3e0f8d37e453d4.png.webp)
表示がどこかおかしい時
もし表示に問題があれば、手順2のコピーの範囲を変えて再度試してみてください。
少なくとも<div ...>の数と</div>の数が同じ数である必要があります。
といっても、どっちがいくつあるか数えるのは大変だと思うので、手っ取り早い修正は最後にある</div>の数を減らしたり増やしたりしてみることです!
(かなり雑な手段なので、上手くいけばラッキーくらいに思ってください)
それでも全く正常に表示できないようであれば、手順2で行ったコピーの範囲をいろいろ変えて試してみてください!
「カスタムHTML」での表示が確認できれば、手順1で変更した「この記事を書いた人」を表示させるチェックは外しても構いません。
注意点:「ウィジェット」での表示と「カスタムHTML」の表示は連動しません
![](https://orentame.com/wp-content/uploads/2022/11/COUNTION-1-1024x293.png.webp)
「カスタムHTML」で作成した著者の情報は、その内容で固定されます。
よってユーザー情報からプロフィール情報を変更しても、「カスタムHTML」内の自己紹介やTwitterなどのリンクは一切変更されません。
プロフィール情報を変更した際には、もう一度ソースコードからコピーして「カスタムHTML」に貼り付ける必要があります。
またAFFINGER6では「この記事を書いた人」と一緒に「最新記事」を表示させることが出来ますが、こちらもプロフィール情報と同様に「カスタムHTMLブロック」に貼り付けた時点で固定され、自動更新はされません。
少しでも変更の手間を減らすためにも、「最新記事」は表示されない状態でソースコードをコピーし、コピーした「カスタムHTML」は再利用ブロックに登録することをオススメします!
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
逆転の発想をすると自己紹介を複数作成できるので、記事の内容に合わせた自己紹介を残すのもアリですね♪
テーマを変更すると、再利用ブロックで使用していた「カスタムHTML」も使えなくなりますのでご注意ください。
カスタム「この記事を書いた人」で自由に自己紹介しよう!
「カスタムHTML」を利用して「この記事を書いた人」を表示する方法を解説しました。
この方法には、以下2つのメリットがあります。
- ウィジェットの「カスタムHTML」でも利用できる
- HTMLで「この記事を書いた人」のデザインやリンク先を自由に変更することが出来ます。
また、同様の手段でほかのテーマでも表示できることを確認しています。
(ただし一部テーマではコピペだけでは正常に表示できないものもありました)
状況はテーマごと、そのサイトの設定ごと、「この記事を書いた人」に何を表示させているかにより状況が変わるため、どんな状況でも必ず出来るとは言い切れませんが、プラグインもPHPも変更せずに表示させる有力な方法だと信じています!
![むねりょ](https://orentame.com/wp-content/uploads/2022/11/icon_face_base-100x100.png)
参考になりましたら、コメントをいただけると今後の励みになります!