WordPressで「この記事を書いた人」をプラグインなしで実装してみた。【コード公開】

けんぞう

田中けんぞう

神奈川で家賃2万の家に住むフリーライター。メディア作り・プログラミング・読書が趣味

 

のような「この記事を書いた人」ボックスをプラグインなしで実装してみました。コードを全文無料公開します。

注意

カスタマイズする際は、必ずバックアップを取るようにしましょう。Wordpressのバックアップ手順については、以下が参考になります。

参考 WordPressでバックアップを取る4つの方法(初心者向け)サルワカ

CSSコード(追加CSSに記載)

 

カスタマイズ>追加CSSの部分に以下のコードを追加します。こちらを追加することによって、ボックスの見た目などを整えます。


jQueryコードを追加

 

タブ切り替えの動きを加えるために必要なjQueryコードを記載します。以下のようにクラスを加えたり、消したりすることで表示・非表示を切り替える感じで実装しました。


HTMLコード(記事に記載)

 

まずは、記事で使用するHTMLコードです。僕のプロフィール画像をデフォルトで入れてあるので、imgタグのsrc部分を編集して自分のプロフィール画像にして下さい。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です