意地でもプラグインを使わずに機能を追加する[WordPress]
※このページにはプロモーションが含まれています。
WordPressを使用する場合にプラグインは必要なもので使う事自体は悪いことではありません。
しかし自分でテーマを作る場合は、追加するプラグインが多いとサイトの読み込みが大幅に遅くなってしまいます。
プラグインには設定用の記述やCSS・JavaScriptが含まれます。PHPだけで機能の追加ができれば、PageSpeed Insightsのスコアは下がりません。
プラグインに表示の役割を任せると、プラグインの更新が止まったときに最悪の場合では表示が崩れたり、表示されなくなってしまいます。
PHPのバージョンが上がっても自分で対応できるように、PHPの学習を兼ねて追加したい機能をプラグイン無しで実装しました。
ウェブフォント
ウェブフォントを使えばどのデバイスでも同じフォントが表示されます。font familyを考える必要もありません。
一方日本語フォントは文字数が多いため、フォントファイルの容量が大きくなります。
そこで日常に使う漢字だけに絞りwoff2に変換することで軽量化します。
CLS（Cumulative Layout Shift）対策も行います。
Amazon セールとイベント
冬の味覚ポイント高還元カニ特集 【期間限定】ダブルポイント祭りPCとモバイルでスタイルシートの変更
wp_is_mobile関数を使ってスタイルシートを使い分けます。
PCとモバイルを別のスタイルシートにする試み
ブロックウィジェットアクセスランキング
ウィジェットに人気記事ランキングを追加します。
プラグインなしでブロックウィジェットに人気記事を追加する
XMLサイトマップ
当ブログのように投稿もアクセスも少ない場合はサイトマップをGoogle Search Consoleに送る必要は無いとGoogle社もいうように、プラグインを入れてまで作る必要はありません。
標準でXMLサイトマップが出力されているので、フィルターを掛けて出力内容を調整しています。
WordPress標準XMLサイトマップのカスタマイズ
HTMLサイトマップ
必要性はわからないのですが、当ブログを読んでくださる方とGoogle Adsenseの申請用に作りました。
プラグインなしのHTMLサイトマップ
目次
本文中に自動で出力する方法とショートコードで出力する方法のどちらでも使えるコードです。
参考サイトではJavaScriptを使って目次の開閉もできます。
サイドバーと記事内に表示できる目次をプラグインなしで作る
お問い合わせフォーム
ページの遷移をせずに記述を変化させるにはAjaxというJavaScriptを使った技術が便利であることを知り、お問い合わせフォームを自分で作ろうと思いました。
同じくJavaScriptで書かれたGoogle reCAPTCHAでスパム対策をしようと試みました。
自分では作りきれなかったのですが、公開されているコードを利用して動くようにはなりました。
今まで知らなかったセキュリティ対策なども合わせて調べています。
snsシェアボタン
お手軽にSNSシェアボタンが作れます。
プラグインなしで作るSNSのシェアボタン
新着記事
表示したい箇所に下のコードを貼り付けます。
<h3>新着記事</h3>
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 8,
'orderby' => 'date',
'order' => 'DESC',
);
$new_posts = get_posts($args);
?>
<ul>
<?php foreach($new_posts as $post): setup_postdata( $post ); ?>
<li><a href="<?php the_permalink(); ?>">
<?php echo get_the_post_thumbnail($post->ID, 'thumbnail'); ?>
<?php the_title(); ?>
</a></li>
<?php endforeach; wp_reset_postdata(); ?>
</ul>下の数字で表示数を変更できます。
'posts_per_page' => 8,関連記事
表示したい箇所に下のコードを貼り付けます。
<?php
$myposts = get_posts( array(
'post_type' => 'post',
'posts_per_page' => '8',
'post__not_in' => array( $post->ID ),
'category__in' => $catkwds,
'orderby' => 'rand'
) );
if( $myposts ): ?>
<h3>関連記事</h3>
<ul>
<?php foreach($myposts as $post):
setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>">
<?php echo get_the_post_thumbnail($post->ID, 'thumbnail'); ?>
<?php the_title(); ?>
</a></li>
<?php endforeach; ?>
</ul>
<?php wp_reset_postdata();
endif; ?>外部リンクと内部リンク
内部リンクをブログカードにするだけでなく、外部リンクもカード化します。
【外部リンク対応】ブログカードをプラグインなしで設置する方法【長文】
パンくずリスト
表示させてはいませんが、検索エンジン用にパンくずリストを設置しています。
パンくずリストを設置していて、表示させない場合はGoogle社の規約違反になるとの記述があったので、現在ではフッターに表示しています。
「JSON-LD」でパンくずリストの構造化データを実装【WP設置編】
最後までお読みくださり、誠にありがとうございます。
週間アクセスランキング
このブログを書いている人
ほんだ
数多くあるブログの中で、このページをお読みくださりありがとうございます。このブログは、炭火で美味しいものを作ることを中心に、日々の趣味についてを文章にすることで、WordPressを使ってのWebページ作成を忘れないようにしています。熱帯魚の世話や野菜の栽培、Linuxについて興味のあることを、つたない文章で綴っています。兵庫県在住です。