こんにちは、ユウトです。
今回は、賢威でトップページの記事に表示される「続きを読む」のリンクをボタン画像に変更する方法についてまとめておきます。
まずは、ボタン画像を作成し、ワードプレス管理画面のメディアからアップロードさせておきます。
続いて、ワードプレス管理画面の外観、テーマの編集と進み、メインインデックスのテンプレートを開きます。
そして、以下のコードが記載されている箇所を探してください。
<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>">「<?php echo(get_the_title('', '', false)); ?>」の続きを読む</a></p>
<!--/本文抜粋-->
このコードを次のように変更します。
※シートを変更する前にバックアップをとっておきましょう。
<!--本文抜粋-->
<?php the_excerpt(); ?>
<p class="link-next"><a href="<?php the_permalink() ?>"><img src="先ほどアップロードした画像のURLを記入"></a></p>
<!–/本文抜粋–>
次に、テーマの編集のdesign.cssを開き、次のコードが記載されている箇所を見つけます。
.link-next a{
padding: 3px 0 3px 15px;
background: url(./images/icon/icon-arrow_r.png) 0 5px no-repeat;
}
上記コードの青色文字を削除すれば完了です。
トップページを表示させ、記事の「続きを読む」の文字リンクがボタン画像に変更されたことを確認してください。
以上で終了です。
