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

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

新しいPCについて(その2)AdobeCCを購入する前に知っておくこと

Adobe Creative Cloudのプランを検討する

「新しいPCについて(その1)Google Chromeが削除できない!を解決!」にも書きましたが、先月から新しいPCを使い始めました。

新しく購入したPCはWindows 10なので、手持ちのIllustrator CS5とPhotoshop CS5のパッケージ版をインストールすることができなくなり、Illustratorを使いたければAdobe Creative Cloud(略してCC)のサブスクを利用しなければならない状況になりました。

Adobe CCのサイトでプランを検討したところ、すべてのアプリを完備したコンプリートプランは年間プランの月々払いー6,248円/月(税込)。
学生・教職員であれば、65%以上OFFー2,178 円/月(税込)。

残念ながら私は学生でも教職員でもないし、月々6,248円出せるほど太っ腹でもないので、欲しいアプリだけの単体プランを検討してみたところ、

Illustrator – 単体プラン 年間プランの月々払いー 2,728 円/月(税込)
Photoshop – 単体プラン 年間プランの月々払いー 2,728 円/月(税込)
Dreamweaver – 単体プラン 年間プランの月々払いー 2,728 円/月(税込)

単体で3つアプリ選ぶと年間プランの月々払いー8,184円/月(税込)。
コンプリートプランより高くなります。

仕方ない。この際Dreamweaverは代替のフリーソフトを探すことにして、IllustratorとPhotoshopの2つだけを購入すると、年間プランの月々払いー5,456円/月(税込)。これでもまだ高い。

何とかならないかとネット検索して見つけたのが下記の記事。

Photoshop、Illustratorのみを利用する最安のお得なおすすめプランは?[Adobe Creative Cloud]

上記の記事でお勧めしているのが、Photoshop – 単体プランでなくフォトプランという選択です。

フォトプラン 年間プランのみの月々払い — 1,078 円/月(税込)

フォトプランにもPhotoshopが入っていますが、単体での扱いでないことや料金の安さから、フルスペックのPhotoshopではないだろうと思い込み、うかつにもスルーしていました。単体プランより安いなんて驚きです。

ただ、フォトプランは年間プランのみしか扱ってないので1年間使うかどうか分からないという人は二の足を踏むところです。
Photoshop、Illustratorのみを利用する最安のお得なおすすめプランは?[Adobe Creative Cloud]では、解約した場合についても詳細に検討されているので、「AdbeCCを購入する前に知っておくこと」の一つだと思いました。

ちなみにAdobe CCの解約については、下記のように定められています。

注意 : 14 日以内にプランを解約した場合は、料金の返金を全額受け取ることができます。年間プラン月々払いの場合、それ以降は残りの契約期間で発生する料金の 50%が請求されます。

【ご購入・ご利用ガイド】プランの変更と解約方法

Creative Cloudご購入・ご利用ガイドこちら⇒

選んだプラン

検討の結果、選んだプランは下記の二つです。

  • Illustrator – 単体プラン 年間プランの月々払いー 2,728 円/月(税込)
  • フォトプラン 年間プランの月々払い — 1,078 円/月(税込)

インストールされたアプリは以下の10個。

  1. Photoshop
  2. Illustrator
  3. Adobe XD
  4. Lightroom
  5. Premiere Rush
  6. Fresco
  7. Bridge
  8. Lightroom Classic
  9. Aero
  10. Camera Raw

月々の支払いは通常なら3,806円(税込)となりますが、初売りキャンペーン中であったため、初年度の支払いは、Illustrator – 単体プランが32%オフの1,848円となりました。フォトプランは割引なしです。

Adobe CCのキャンペーンについて

Adobe CCの購入にはキャンペーンを利用することが望ましいと思いますが、キャンペーンがいつあるかは分からないそうです。

驚いたことにAdobe CCの割引セールは、Adobeの公式サイト以外に「AmazonのAdobeセール」や「Adobe提携スクールの割引キャンペーン」などがあり、そちらの方が割引率が高かったりするらしい。
下記の記事も「AdbeCCを購入する前に知っておくこと」を教えてくれます。

【2021最新】Adobe CC 割引セールの時期はいつ?価格は?

※Adobeの公式サイトのキャンペーンについては、1回限りしか利用できません。

140秒映画『viewers:1』のSF感。どうやって作ったの?

140秒のショートフィルム『viewers:1』がSNS上で話題になっています。

まだ観てないという方、まあ、ご覧ください。

この作品は、GEMSTONEクリエイターズオーディション第6回グランプリ作品だそうです。
第6回の募集テーマは140秒以内の「リモートフィルム」作品であること。

【リモートフィルム】の定義
リモートで企画され、リモートで撮影され、リモートで視聴する、すべての過程がリモートで作られたあらゆる映像作品群。リモート演劇、リモート映画、リモートコント、リモートMV、リモートアニメなど、すべてのリモート作品の総称。

第六回テーマ:「リモートフィルムコンテスト」参照

リモートで作るというと、部屋に閉じこもって独りパソコンカタカタとか、Zoomでミーティングとかいう感じですが、この作品はオールロケに映像加工をプラスしたもの。
ドキュメンタリータッチなので、観ている人は皆思うはずです。

ここはどこ?

ここはどこなんでしょう?
そしてあの巨大ロボットたち!どうやって作ったの?

その謎を明かしてくれている動画がありましたので、こちらもご覧ください。
意外な制作過程にも、出演俳優さんの素顔にも驚かされますよ。

新しいPCについて(その1)Google Chromeが削除できない!を解決!

10数年愛用してきたPCが不調になり、illustratorにも不具合が出てきたので、昨年末修理に持っていきました。
OSがWindows7のままで劣化しているパーツを全て交換したところで、もう長く快適には使えそうもないという判断で、ついに継続使用を諦め、Windows10のOSでショップブランドPCを作ってもらうことにしました。

大晦日に新しいパソコンが出来上がり、年明けからは暇さえあればPCを自分環境にするために、あれやこれやソフトを入れたり試してみたり削除したりを楽しんでいます。
なので、Adobe Creative Cloudのことや使ってみたソフトのこと、経験したエラーのことなど、今後折々備忘録として書いていきたと思っています。
今日はGoogle Chromeの不快な事象についてメモしておきます。

PCを起動するとGoogle Chromeのログイン画面が勝手に立ち上がる

一昨日からPCを起動すると勝手にGoogle Chromeのログイン画面が立ち上がるようになりました。
Mozilla Firefoxを規定ブラウザに設定しているにも関わらず、しかもGoogleには既にログイン済みなのにも関わらずに、です。

一時的な現象かなと思っていたら、翌日もPCを起動すると勝手にGoogle Chromeが立ち上がるので、Chromeを削除して再インストールした方がいいだろうと考えたのですが、、、

ところが、これが簡単には削除できないのです。
通常であれば、PCのコントロールパネル「プログラム」を開いて、ここでアンインストールするだけで簡単にできるはず。

しかしアンインストールをクリックすると、以下のような警告ダイアログが出ます。

すべてのGoogle Chromeウィンドウを閉じてからもう一度お試しください。

え?クローム開いてないんだけど。

強力なデータクリーナーソフトで削除するという手もありますが、できるだけ穏健な方法で対処したい。
というわけで、ググっていくと答えを提供してくれているブログがありました。

Google Chromeがアンインストールできない方への解決方法【5秒で解決】

タスクマネージャーを立ち上げて、「プロセス」を見ると、クローム関連のファイルが10個くらいありました。全部終了させてから、Chromeをアンインストールすると通常通りに削除できました。
こんなに簡単なことだったんですねえ。

Google Chromeを再インストールして、設定を見直す。

下記記事を参考にGoogleChromeを設定しました。

ChromeがPC起動時”なぜか起動する”2つの原因

(1)Windows10の設定画面で「アプリ」を開いてGoogle Chromeをオフにする。

再インストール後にアプリのスタートアップ画面を確認したところ、今回はGoogle Chromeがスタートアップアプリに含まれていませんでした。

(2)Chromeの設定で「Google Chromeを閉じた際にバックグラウンド アプリの処理を続行する」をOFFにする

この設定画面は、うっかりすると見過ごしそうな場所にあるのが、ちょっとイラっとします。

設定画面の「詳細設定」を三角ボタンで展開して「システム」をクリックする。

PCをシャットダウンしてから起動させてみました。今度はGoogle Chromeが勝手に立ち上がることなく、すっきりした気分!

もっとも、Google Chromeを規定のブラウザにしていて、PCも一人で使っていて、勝手に起動してくれるのは逆にありがたい、という方にとっては設定する必要もない役に立たない話ですが。