WordPress│目次下にウィジェットを追加するカスタマイズ

2022.04.132026.10.21

SWELLの本文に目次があるときだけ、その直前・直後へ静的HTMLのウィジェットを配置する例です。通常の投稿を対象にし、目次がない記事では表示しません。

本記事では目次下にウィジェットを追加するカスタマイズを作成しましたので紹介します。

ウィジェットの中身を用意

ウィジェットに入れる内容として今回はプロフィールを用意しました。

著者のプロフィールHTML

SWELLの著者表示のHTMLを応用して、プロフィールを挿入してみます。

プロフィールHTMLの記入例です。掲載画像は旧版の表示例で、以下の改訂コードの実画面検証を示すものではありません。

画像URLやリンク、テキストをご自身の情報に合わせて変更し、カスタムHTMLブロックまたはウィジェットに挿入してください。

<div class="p-authorBox">
<div class="p-authorBox__l">
<img width="100" height="100" src="https://example.com/path-to-avatar.png" alt="著者のアバター" class="avatar">
<a href="https://example.com/author/profile/" class="p-authorBox__name hov-col-main u-fz-m">著者名</a>
</div>
<div class="p-authorBox__r">
<p class="p-authorBox__desc u-thin">
肩書きや自己紹介文をここに記載します。<br>
専門分野や経歴など、読者に伝えたいプロフィールを入力してください。<br>
</p>
<ul class="c-iconList is-style-circle p-authorBox__iconList">
<li class="c-iconList__item -twitter">
<a href="https://x.com/your_account" target="_blank" rel="noopener" class="c-iconList__link u-fz-14 hov-flash-up" aria-label="X">
<i class="c-iconList__icon icon-twitter" role="presentation"></i>
</a>
</li>
</ul>
</div>
</div>

プロフィールの見た目を整えるCSSです。子テーマの style.css または管理画面の「外観」＞「カスタマイズ」＞「追加CSS」に貼り付けてください。

.p-authorBox__iconList {
	padding-left: 0!important;
	list-style: none!important;
}
@media (min-width: 600px) {
	.p-authorBox {
		align-content: stretch;
		display: flex;
		justify-content: space-between;
		padding: 1.5em;
	}
}
.p-authorBox {
	padding: 1em;
    border: 1px solid var(--color_border);
    border-radius: var(--swl-radius--8,0);
}
@media (min-width: 600px) {
	.p-authorBox__l {
		margin-bottom: 0;
		width: 160px;
	}
}
.p-authorBox__l {
    margin: 0 0 1em;
    text-align: center;
}
@media (min-width: 600px) {
	.p-authorBox__r {
		border-left: 1px solid var(--color_border);
		display: flex;
		flex-direction: column;
		padding-left: 1.5em;
		width: calc(100% - 160px - 1.5em);
	}
}
.p-authorBox__name {
    color: inherit;
    display: block;
    font-weight: normal;
    line-height: 1.2;
    margin-top: 8px;
    text-decoration: none;
}
.p-authorBox__desc.u-thin {
    padding: 0 .5em 0 .5em;
}

以下有料コンテンツです。

有料コンテンツ