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

    最近、何かと身の回りを整理したくなる断舎利モードに入っていて、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;
    	}
    	 
    

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

    パンくずリストをプラグイン無しで作る

    今回はプラグイン無しでパンくずリストを作ったので、備忘録としてメモしておきます。

    作成にあたって、とても分かり易い解説がされている下記サイトを参照いたしました。(感謝!)

    WordPress】パンくずリストをプラグイン無しで自作する方法

    オリジナルゲーム.com【WordPress】パンくずリストをプラグイン無しで自作する方法」参照

    作成手順は、

    1. 作業前に変更するファイルのコピーを取っておく(※これ、大事です)
    2. functions.phpにコードを追記する
    3. パンくずを表示させたいファイルにコードを追記する
    4. style.cssでスタイルを整える
    5. category.phpとtag.phpの二重表記を修正(必要があれば)

    2.functions.phpに追記したコード

    「【WordPress】パンくずリストをプラグイン無しで自作する方法」に掲載されている完成版を、まるっきりコピーして使用させていただきました。

    // ===========================
    // = パンくず =
    // ===========================
    function mytheme_breadcrumb() {
        	//HOME>と表示
        	$sep = '>';
        	echo '<li><a href="'.get_bloginfo('url').'" >HOME</a></li>';
        	echo $sep;
         
        	//投稿記事ページとカテゴリーページでの、カテゴリーの階層を表示
        	$cats = '';
        	$cat_id = '';
        	if ( is_single() ) {
        		$cats = get_the_category();
        		if( isset($cats[0]->term_id) ) $cat_id = $cats[0]->term_id;
        	}
        	else if ( is_category() ) {
        		$cats = get_queried_object();
        		$cat_id = $cats->parent;
        	}
        	$cat_list = array();
        	while ($cat_id != 0){
        		$cat = get_category( $cat_id );
        		$cat_link = get_category_link( $cat_id );
        		array_unshift( $cat_list, '<a href="'.$cat_link.'">'.$cat->name.'</a>' );
        		$cat_id = $cat->parent;
        	}
        	foreach($cat_list as $value){
        		echo '<li>'.$value.'</li>';
        		echo $sep;
        	}
         
        	//現在のページ名を表示
        	if ( is_singular() ) {
        		if ( is_attachment() ) {
        			previous_post_link( '<li>%link</li>' );
        			echo $sep;
        		}
        		the_title( '<li>', '</li>' );
        	}
        	else if( is_archive() ) the_archive_title( '<li>', '</li>' );
        	else if( is_search() ) echo '<li>検索 : '.get_search_query().'</li>';
        	else if( is_404() ) echo '<li>ページが見つかりません</li>';
        }
    

    3.パンくずリストを表示させたいファイルに追記するコード

    <div class="mytheme_breadcrumb">
        <?php mytheme_breadcrumb(); ?>
           </div>
    

    パンくずリストを表示させたいファイル
      ・single.php
      ・category.php
      ・tag.php

    コードを追記する位置は各ファイルの<div id=”content” role=”main”>の下になります。<div>のクラス名は任意。

    4.style.cssでスタイルを整える(一例:2021/03/27修正しました)

    /* パンくず */
    .mytheme_breadcrumb li {
        font-size: 90%;
        display: inline-block;   
    }
    

    5.category.phpとtag.phpの二重表記を修正

    私が使っているテンプレートでは、カテゴリーとタグページに元々パンくずが表示されていたので、二重表記になってしまいました。スタイルを統一するために
    category.phpとtag.phpのコードを一部削除しました。

    category.phpで削除したところ

    <h1 class="archive-title"><?php printf( __( 'Category Archives: %s', 'twentytwelve' ), '<span>' . single_cat_title( '', false ) . '</span>' ); ?></h1>
    

    tag.phpで削除したところ

    <h1 class="archive-title"><?php printf( __( 'Tag Archives: %s', 'twentytwelve' ), '<span>' . single_tag_title( '', false ) . '</span>' ); ?></h1>
    

    wpプラグイン「topへ戻る」ボタンを比べてみました。

    ボタンをクリックすると、ページのトップにシュルシュルっとスクロールしてくれる。無くてもさほど困らないけど、あるとwebサイトがちょっとカッコ良くなる「topへ戻るボタン」を、いくつか比べてみました。
    プラグインをインストールして有効化するだけで 作動するものと、設定やオプションがあって、カスタマイズできるタイプがあります。
    「RRF Scroll To Top」,「Royal Scroll to Top」
    「Smooth Page Scroll to Top」,「Scroll Button」
    topbutton-1いずれも同じタイプのボタンです。
    オプションはありませんので、プラグインを有効化するだけで、すぐ作動します。
    ボタンが現れる位置やアニメーションに、微妙な違いがあります。
    「Scroll to Top Button」
    topbutton-3これもオプション無し。プラグインを有効化するだけでOKです。画面の右下角っこに四角いボタンがスッと現れます。
    「LB Back To Top」
    topbutton-11オプション無し。プラグインを有効化するだけでOKです。
    画面右下に文字付きの黒い四角いボタンが現れます。
    文字はプラグインファイル(backtop/index.php)を直接編集して変更できます。
    「Smooth-scroll-to-top」
    topbutton-8オプションは無し。プラグインを有効化するだけでOKです。画面右下にボタンが現れます。
    「WP Scroll To Top」
    topbutton-17プラグインの有効化だけで作動します。アイコン5個からボタンを選べるオプションがあります。
    (私の場合icon4は、表示されませんでした。)
    「WP-Smooth-Scroll」
    topbutton-9ボタンの位置を右、中央、左から選択できます。
    ボタンは、マウスオーバーで青色に変わります。
    「Back To Top」
    ボタンやアニメーションの効果について、オールマイティーなオプションがあります。
    topbutton-13ボタンのオプションは以下の3通り。
    ①左のような25種類の画像が用意されているので、その中から気に入ったボタンを使う。
    ②手持ちの画像をアップロードして使う。
    ③画像でなくテキストでボタンを表示する。
    ボタンの動きについても3通りのエフェクトが選べます。
    ①ボタンが、フェードイン/フェードアウト する。
    ②ボタンが画面下から上下に、スライドアップ/スライドダウンする。
    ③ボタンが画面右下角からヒョイと現れ、ヒョイと引っ込む。
    「Scroll To Top」
    topbutton-18テキストとテキスト幅、文字色、背景色を設定できます。ボタンは画面の中央に現れます。topbutton-5
    まだまだ、ありますが、このくらいにしておきます。
    利用しているWordPressのバージョンや導入しているプラグインなどとの相性で、作動しないものがあるかも知れません。

    wordpressで掲示板を作る

    ご注意ください!
    WordPress 4.4からテンプレートの仕様が変わり、下記の方法ではメールアドレスを入力必須項目から外すことができなくなりました。
    「WordPress 4.4で掲示板を作る」を書きましたので、そちらも合わせてご参照ください。

    当サイトのゲストブックは、これまでCGIによるフリーの掲示板ソフトを使っていましたが、スパムが大量にやってくるようになったため、新たにwordpressを使用して作成し直すことにしました。

    私が作成したい掲示板(=ゲストブック)の完成目標は、以下の5項目。

    ①wordpressのコメント機能を利用してゲストブックを作る

    「レンサバネット」の「WordPressに掲示板を簡単に設置する方法」を参考にさせていただきました。(こちらのサイトは現在リンク切れとなっています)

    1.固定ページに掲示板用のページを新規作成します。

    本文は空白でも構いません。当サイトではページタイトルを「guestbook」としました。
    それだけでも、掲示板ページが出来上がるのですが、私はメールアドレスを入力必須項目から外したいので、

    2.ディスカッションの設定で、「名前とメールアドレスの入力を必須にする 」のチェックを外します。keijiban-0

    ②メールアドレスは入力必須項目から外し、webアドレスの入力フォームは削除する。

    「「Dragon-Ark」の【wordpress】コメントの必須項目を変更する(メールを必須としない)を参考にさせていただきました。

    wp-comments-post.phpの以下のコード(wordpres.ver3.5.2の場合75行目辺り)をコメントアウトして、Eメールの入力チェックを無効にします。そして新たに名前を必須項目にするコードを追加します。

    /**コメントアウトここから
    if ( get_option('require_name_email') &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; !$user-&amp;amp;amp;amp;amp;amp;gt;exists() ) {
    	if ( 6 &amp;amp;amp;amp;amp;amp;gt; strlen($comment_author_email) || '' == $comment_author )
    		wp_die( __('&amp;amp;amp;amp;amp;amp;lt;strong&amp;amp;amp;amp;amp;amp;gt;ERROR&amp;amp;amp;amp;amp;amp;lt;/strong&amp;amp;amp;amp;amp;amp;gt;: please fill the required fields (name, email).') );
    	elseif ( !is_email($comment_author_email))
    		wp_die( __('&amp;amp;amp;amp;amp;amp;lt;strong&amp;amp;amp;amp;amp;amp;gt;ERROR&amp;amp;amp;amp;amp;amp;lt;/strong&amp;amp;amp;amp;amp;amp;gt;: please enter a valid email address.') );
    }
    コメントアウトここまで*/
    //追加部分ここから
    if(!$user-&amp;amp;amp;amp;amp;amp;gt;ID){
    if ('' == $comment_author)
    wp_die('名前を入力して下さい。');
    }
    //追加部分ここまで

    名前とEメールの入力欄を残して、ウェブサイトの入力欄を削除するには、wp-includesフォルダの中にあるcomment-template.phpを編集します。以下のコード部分を探して(wordpres.ver3.5.2の場合1524行目辺り)websiteのフォーム部分を削除したコードに置き換えます。

    以下のコード部分を削除する

    	$fields =  array(
    	'author' =&amp;amp;amp;amp;amp;amp;gt; '&amp;amp;amp;amp;amp;amp;lt;p class="comment-form-author"&amp;amp;amp;amp;amp;amp;gt;' . '&amp;amp;amp;amp;amp;amp;lt;label for="author"&amp;amp;amp;amp;amp;amp;gt;' . __( 'Name' ) . ( $req ? ' &amp;amp;amp;amp;amp;amp;lt;span class="required"&amp;amp;amp;amp;amp;amp;gt;*&amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;gt;' : '' ) . '&amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;gt; ' .
    	            '&amp;amp;amp;amp;amp;amp;lt;input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;',
    	'email'  =&amp;amp;amp;amp;amp;amp;gt; '&amp;amp;amp;amp;amp;amp;lt;p class="comment-form-email"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;label for="email"&amp;amp;amp;amp;amp;amp;gt;' . __( 'Email' ) . ( $req ? ' &amp;amp;amp;amp;amp;amp;lt;span class="required"&amp;amp;amp;amp;amp;amp;gt;*&amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;gt;' : '' ) . '&amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;gt; ' .
    	            '&amp;amp;amp;amp;amp;amp;lt;input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;',
    	'url'    =&amp;amp;amp;amp;amp;amp;gt; '&amp;amp;amp;amp;amp;amp;lt;p class="comment-form-url"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;label for="url"&amp;amp;amp;amp;amp;amp;gt;' . __( 'Website' ) . '&amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;gt;' .
    	            '&amp;amp;amp;amp;amp;amp;lt;input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;',
    );
    

    以下のコードに置き換える
    [※記述ミスがあったため、4行目を修正しました。20013年8月15日]

    $fields = array(
            'author' =&amp;amp;amp;amp;amp;amp;gt; '&amp;amp;amp;amp;amp;amp;lt;p class="comment-form-author"&amp;amp;amp;amp;amp;amp;gt;' . '&amp;amp;amp;amp;amp;amp;lt;label for="author"&amp;amp;amp;amp;amp;amp;gt;' . __( 'Name' ) . ( $req ? ' &amp;amp;amp;amp;amp;amp;lt;span class="required"&amp;amp;amp;amp;amp;amp;gt;*&amp;amp;amp;amp;amp;amp;lt;/span&amp;amp;amp;amp;amp;amp;gt;' : '' ) . '&amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;gt; ' .
                      '&amp;amp;amp;amp;amp;amp;lt;input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;',
         'email'    =&amp;amp;amp;amp;amp;amp;gt; '&amp;amp;amp;amp;amp;amp;lt;p class="comment-form-email"&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;label for="email"&amp;amp;amp;amp;amp;amp;gt;' . __( 'Email' ) . '&amp;amp;amp;amp;amp;amp;lt;/label&amp;amp;amp;amp;amp;amp;gt;' .
                    '&amp;amp;amp;amp;amp;amp;lt;input id="email" name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30" /&amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;lt;/p&amp;amp;amp;amp;amp;amp;gt;'
    );
    

    ③ゲストブックのページだけ、デザインを変更する。

    1.使用中のテーマ(私の場合「twentyeleven」)に新規テンプレートを追加します。
    2.新規テンプレートを作成するには、テーマのpage.phpを開き、任意の名前を付けて保存します。例えばpage-guestbook.phpとか。
    3.新規に追加したテンプレートは、テンプレートネームを変更します。
    テンプレートファイルの冒頭に記述されているTemplate Nameを任意の名前に変更。
    たとえば以下のように書き直します。

    &amp;amp;amp;amp;amp;amp;amp;amp;lt;?php
    /*
    Template Name: guestbook
    */

    4.最初に作成した固定ページguestbookを開いて、テンプレートの項目からguestbookを選択すると、テンプレートがデフォルトから、guestbookのテンプレートに変更されます。

    keijiban-15.guestbookのテンプレートを編集する。
    ゲストブックのページには、ヘッダーイメージやメニュー項目を表示させたくなかったので、テーマのheader.phpをコピーして新たにゲストブック用のheader-2.php(名前は任意)を作成しました。
    6.header-2.phpからヘッダーイメージやメニュー項目に当たる部分のコードを削除します。
    (※2014年12月現在、ヘッダーイメージは表示するように、レイアウトを変更しました。)
    7.guestbookのテンプレートにheader-2.phpを読み込ませるには、get_header(); ?>の()部分に、読み込ませたいheaderの名前を記述します。

    &amp;amp;amp;amp;amp;amp;amp;amp;lt;?php
    /*
    Template Name: guestbook
    */
    
    get_header(2); ?&amp;amp;amp;amp;amp;amp;amp;amp;gt;

    ④ファイルをアップロードできるようにする。

    コメント欄に画像などのファイルをアップできるようにする「プラグインcomment-imageを導入しました。
    1.プラグインの新規追加画面でcomment-imageを検索
    2.いますぐインストールをクリック
    3.プラグインの有効化をクリック
    有効化するだけで、画像 (GIF, PNG, JPG, JPEG)をアップすることができます。
    特に設定画面もないので、どうしても変更したいところがあれば、comment-imageのPHPファイルやcssファイルを直接書き直すことになります。

    ⑤画像認証を設置する。

    ほとんどのスパムは、wordpressの最強スパムブロックプラグイン「Akismet 」がキャッチしてくれるので、ブログに表示されることはありませんが、画像認証なしだと、やはりスパムがゾクゾクやってきます。認証無しってことは、ドアを開けっ放しにしているのと同じなんですね。
    そこで、SI CAPTCHA Anti-Spam(コメント画像認証導入プラグイン)を導入することにしました。

    「WordPress超初心者講座」の「SI CAPTCHA Anti-Spam(コメント画像認証導入プラグイン)」を参考にさせていただきました。

    1.プラグインの新規追加画面でSI CAPTCHA Anti-Spamを検索
    2.いますぐインストールをクリック
    3.プラグインの有効化をクリック
    4.管理画面のプラグイン項目からSI CAPTCHA オプションを開いて、必要なら設定をする。
    オプションの設定は、デフォルトのままでも特に問題ありません。

     [追記]2015年2月22日 SI CAPTCHA Anti-Spamは不要になりました。

    先月SiteGuard WP Pluginを導入したのですが、SI CAPTCHA Anti-Spamを有効化したままにしていたので、画像認証の入力画面が2個にダブっていることに、今頃気が付きました。
    SiteGuard WP Pluginは

    「管理ページとログインに関する攻撃からの防御に特化したセキュリティプラグインです。ブルートフォース攻撃、リスト攻撃等の、不正にログインを試みる攻撃や、コメントスパムを受けにくくするための機能です。画像認証の文字は、ひらがなと英数字が選択できます。」

    という優れものです。

    [追記]2014.4月19日
    上記の方法で掲示板を作るにあたって注意すべきこと

    WordPressをアップグレードするたびに、「wp-comments-post.php」とwp-includesフォルダ内の「comment-template.php」の二つのコアファイルを、変更箇所を探して書き換えなければなりません。
    WordPress3.7からはアップデート(マイナーアップデートのみ)が自動で更新されるようになったため、コアファイルが勝手に上書きされてしまいますから、要注意です。
    やはり、コアファイルをカスタマイズするのはあとあと面倒ですね。

    【追記2】2014年11月21日
    コメント入力フォームの位置について

    コメントの入力フォームを掲示板ページの上位に設置したい場合、使用しているテーマのテンプレートファイルcomments.phpを開いて、<?php comment_form(); ?>タグの記述位置を変更します。

    デフォルトではテンプレートの最後行あたりに書かれていると思いますが、それを上方にある<?php if ( have_comments() ) : ?>タグの、すぐ上に移動させます。