• HOME
  • >
  • WEB作成
  • >
  • プラグイン無しで作った「ページナビ」と「トップへ戻るボタン」
  • プラグイン無しで作った「ページナビ」と「トップへ戻るボタン」

    最近、何かと身の回りを整理したくなる断舎利モードに入っていて、2年以上着なかった服とか、10年近く着こんでいる服とか、使わなくなったバッグとか、再読しそうもない本とか、使うかも~と取って置いた紙袋とか、インストールしたけど活用してないスマホのアプリとか、、、、諸々処分しています。

    その流れで当サイトを見直してみると、インストールしているプラグインが多過ぎるのではないかと気になりました。
    確かにプラグインは「こんなのが欲しかった!」という機能を簡単に実装してくれる便利なものです。
    その便利さと単なる好奇心から、これまで多数のプラグインを試してきました。
    導入しても使い勝手が悪いものも多く、その都度削除を繰り返してきて、現在21個のプラグインが入っています。
    中には何のために入れたか忘れてしまったプラグインもあり、これはちょっとまずい状況です。
    プラグインの入れ過ぎはデメリットが大きい。

    WordPressでプラグインを導入するときの心構えと、初心者におすすめの7つのプラグイン

    https://thewppress.com/basic/plugins-for-newbies/ 参照

    プラグインは更新がたびたびあって煩わしい上に、更新を怠るとそれもまた不具合の元です。
    当サイトも以前「WordPress Related Posts」の更新時に重大な不具合が起きたこともありました。
    ⇒「プラグインを使わないで、関連する投稿記事を表示する

    便利だからとプラグインを安易に導入するより、できるだけプラグイン無しで機能を実装できる方法を見つけていきたいと思います。Google先生の力を借りて。

    というわけで、今回、比較的簡単にできそうなものを見つけましたので、メモしておきます。

    (1)ページナビをプラグイン無しで作る

    これまでページ送りの表示にはプラグイン「WP-PageNavi」を使っていましたが、これをプラグイン無しで作る方法が下記サイトに書かれていました。

    「WordPressにプラグイン無しでページネーションを設置する方法」 

    https://coliss.com/articles/blog/wordpress/how-to-build-a-wordpress-post-pagination-without-plugin.html 「コリス

    ノーマル版と拡張版の二通り紹介されていますが、私はPagination without plugin:拡張版の方をまるっきりコピーして実装できました。興味のある方は「WordPressにプラグイン無しでページネーションを設置する方法」を参考になさってください。
    出来上がりは、こんな感じです。↓

    ページネーションを表示させる場所は、当サイトではテーマテンプレートの「index.php」のみにしました。

    (2)TOPへ戻るボタンをプラグイン無しで作る

    プラグイン「Royal Scroll to Top」を使って表示していた「トップへ戻るボタン」、これもプラグイン無しで作ることにしました。
    アフィリエイトで稼ぐ方法を全部話そうと思う」というサイトの下記記事が分かり易く、とても参考になりました。というか、サイト主さん自作のJavaScriptをそのまま(勝手に)使わせていただきました(ありがとうございます)。

     ページの先頭に戻るボタンを自作してみた 
     自作のJavaScriptをWordPressで利用する方法

    アフィリエイトで稼ぐ方法を全部話そうと思う」参照

    cssを少し書き換えて、丸いボタンを作りました。

    /* topへ戻るボタン */
    #scroll-top{ /* ボタンのデザイン */
    	background-color:#000; /* ボタンの背景色 */
    	color:#fff; /* ボタンの文字色 */
    	text-align:center; /* ボタン内の文字を中央に */
    	position:fixed; /* 画面がスクロールしても固定する */
    	right:100px; /* 固定する場所は右から100px */
    	bottom:20px; /* 固定する場所は下から20px */
    	display:none; /* ボタン表示は最初は非表示 */
    	margin:0 0; /* ボタンの余計な余白はいらない */
    	border-radius: 50%; /* 円形にする */
    	-webkit-border-radius: 50%; /* Safari,Google Chrome用 */
    	-moz-border-radius: 50%; 
    	cursor:pointer; /* カーソルを指のマークに */
    	opacity:0.6; /* ボタンの透明度 */
    	}
    	 
    	#scroll-top p{
    		font-size: 14pt;/* ▲のフォントサイズ*/
    		padding:16px;/* ▲の余白 */
    		text-decoration:none;
    		display:block;
    	}
    	 
    

    出来上がりはこんな感じです。↓

    コメントはこちらから

    お名前は必須項目です。

    CAPTCHA


    画像を添付できます(JPEGだけ)

    このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください