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

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

    イラスト素材ブログ「アトコンのMe-time」を始めました。

    昨年2月から、フリー素材投稿サイト「イラストAC」に素材投稿を始めました。
    以前はフリー素材サイトからダウンロードして、チラシやバナーを作る素材利用者側だったのですが、adobe Illustratorにはまって、自分でも素材を作りたくなってきました。

    16ケ月経った現在、投稿数 150点。
    ダウンロード数は、国内と海外を合わせて合計 5,130 DL 。

    投稿数もダウンロード数も、まだまだ少ないです。
    とてもブログで友人に紹介できるものではなく、作成した素材も「見て見て!!」と自信を持って披露できるものでもなく、こっそりと匿名で投稿を続け、そのうち素敵な素材が描けるようになり、DLも劇的に増え、いつかは堂々とポートフォリオサイトを作るのだ、と心に決めていたのですが、、、、

    今月、イラストACサイトから「イラストAC以外のWebサイトに作品をアップしていると、著作者確認が取れて作品審査がスムーズに行えます」といった旨の案内があったので、思い切って作品サイトを作ることにしました。

    そのうち素敵な素材が描けるようになり、DLも劇的に増え、、、、なんて夢みたいなこと言ってないで、その時その時のありのままをさらけ出すことが、もしかしたら上達の道になるかもしれません。

    というわけで、これからは作成素材を「アトコンのMe-time」にアップしてから、イラストACに投稿することにします。
    時々でも、どなたか見てくだされば嬉しいです。

    プラグインを使わないで、関連する投稿記事を表示する

    WordPressには、標準装備以外の機能を追加してくれるプラグインが数多く配布されています。
    とても便利なのでついつい、あれもこれもとインストールしてしまいがちですが、メリットがあれば当然デメリットもあるわけで。
    プラグインを入れ過ぎるとアップデート作業も増えますし、めったにないことですがアップデートの際に重大な不具合を起こすリスクもあります。

    WordPress Related Postsのアップデートでエラー

    この前、WordPress Related Postsのアップデートで、そのめったにない不具合を経験しました。
    WordPress をバージョン 4.8 に更新して、そのあとWordPress Related Postsをバージョン 3.6.4 にアップデートしようと更新ボタンを押した途端、画面が真っ白!何も表示されない状態になってしまいました。
    管理画面も真っ白で入ることができず、私の頭の中も真っ白に!
    本来ならこんなトラブルの時こそ、エラーの原因を追究してスキルを上げるチャンスなのですが、真っ白な画面が恐ろしくて気持ちの余裕をなくし、すぐにFFFTPを立ち上げてサーバーからWordPress Related Postsを削除しました。
    それで一応問題なくサイトは復旧しました。

    あとから検索するとこのエラーに対して、解決法がネットにありました。
    原因は「PHPのバージョンが5.3以下だと作動しない」ことだそうです。

    参照サイト:

    【WordPress】関連記事プラグインRelated Postsエラーの解決方法

    プラグイン無しで関連投稿記事を表示させる方法

    WordPress Related Postsはバックアップを取ってあったので、旧バージョンをサーバーにアップし、そのまま使い続けていました。こんな感じで関連記事を表示させています。

    しかし、このプラグインのアップデートは当分できないので、この際、プラグインを使わず関連投稿記事を表示させてみることにします。

    以下のサイトを参照させていただきました。ありがとうございます!

    WordPressのサムネイルつき関連記事を表示する

    プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]

    『WordPressのサムネイルつき関連記事を表示する』のコードでは、サムネイルの下にタイトルといった形で横並びに5個表示されます。
    プラグインなしで関連記事を表示する方法[WordPressカスタマイズ]』のコードでは、サムネイルの横にタイトルと記事の抜粋を表示し、それを10個縦に並べたスタイルになります。
    どちらも関連した記事を、ページを読み込むごとにランダムに表示させます。

    新規にテンプレートを作成する
    related-entries.php

    テーマ内にrelated-entries.phpというファイルを新規に作成します。
    コードは下記のようにしました。

    &amp;lt;?php
    //カテゴリ情報から関連記事を5個ランダムに呼び出す
    $categories = get_the_category($post-&amp;gt;ID);
    $category_ID = array();
    foreach($categories as $category):
      array_push( $category_ID, $category -&amp;gt; cat_ID);
    endforeach ;
    $args = array(
      'post__not_in' =&amp;gt; array($post-&amp;gt;ID,'booklist'),
      'posts_per_page'=&amp;gt; 5,//表示させる個数
      'category__in' =&amp;gt; $category_ID,
      'orderby' =&amp;gt; 'rand',//ランダムに表示させる
    );
    $query = new WP_Query($args); ?&amp;gt;
      &amp;lt;?php if( $query -&amp;gt; have_posts() ): ?&amp;gt;
      &amp;lt;?php while ($query -&amp;gt; have_posts()) : $query -&amp;gt; the_post(); ?&amp;gt;
    
         &amp;lt;ul class="related-entry"&amp;gt;
          &amp;lt;li class="related-entry-thumb"&amp;gt;
      &amp;lt;a href="&amp;lt;?php the_permalink() ?&amp;gt;" title="&amp;lt;?php the_title_attribute(); ?&amp;gt;"&amp;gt;
            &amp;lt;?php if ( has_post_thumbnail() ): ?&amp;gt;
            &amp;lt;?php the_post_thumbnail(array(100,100)); //サムネイルのサイズ?&amp;gt;
            &amp;lt;?php endif; ?&amp;gt;
            &amp;lt;/a&amp;gt;
          &amp;lt;/li&amp;gt;
                 &amp;lt;li class="related-entry-title"&amp;gt; &amp;lt;a href="&amp;lt;?php the_permalink(); ?&amp;gt;"&amp;gt;
              &amp;lt;?php the_title(); ?&amp;gt;
              &amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;
        &amp;lt;/ul&amp;gt;
    
      &amp;lt;?php endwhile;?&amp;gt;
      &amp;lt;?php else:?&amp;gt;
      &amp;lt;p&amp;gt;記事はありませんでした&amp;lt;/p&amp;gt;
      &amp;lt;?php
    endif;
    wp_reset_postdata();
    ?&amp;gt;
    &amp;lt;br style="clear:both;"&amp;gt;
    

    下記のコードをテーマのテンプレートの表示させたい所に挿入します。
    一般的にはsingle.phpに表示させるようです。

    
     &amp;lt;!-- 関連する投稿ここから --&amp;gt;             
    
                &amp;lt;div id="related-entries"&amp;gt;
      &amp;lt;h3&amp;gt;関連する投稿&amp;lt;/h3&amp;gt;
      &amp;lt;?php include( TEMPLATEPATH . '/related-entries.php' ); ?&amp;gt;
    &amp;lt;/div&amp;gt;&amp;lt;!-- #related-entries --&amp;gt;
         &amp;lt;!-- 関連する投稿ここまで --&amp;gt;
    

    (※)今までWordPress Related Postsを導入していた場合は、テンプレートに記述してある以下のコードを必ず削除しましょう。

    &amp;lt;?php wp_related_posts()?&amp;gt;

    style.CSSのコードも書いておきます。あまり参考にならないかもしれませんが・・・
    (※ただ今cssを修正中です。)
    仕上がりはこんな感じです。5個の関連記事を横並びにしてみました。

    一つプラグインを減らすことができて、ちょっとスッキリです。と言いたいところですが、こんな記事を見つけました。

    【WordPress】プラグイン選びのポイント~悪いプラグインって何?

    私もプラグインをあれこれ入れてみては削除し、を繰り返してきたのでデータベースには相当ゴミがたまっているはず。次回は、溜まったゴミを削除するプラグインClean Optionsを試してみたい。

    WordPress4.4で掲示板を作る

    以前、「wordpressで掲示板を作る」にWordPressのコメントフォームを利用して掲示板を作る方法を紹介しました。

    コメントフォームをそのまま使うと、メールアドレスやウェブサイトの入力項目が表示されます。
    メールアドレスが入力必須項目となっていると、掲示板としては気軽にコメントしずらい気がします。
    かといって、WordPressのディスカッションの設定では、メールアドレスだけ必須項目から外すということができません。
    それで、テンプレートを少し書き直すことで、ウェブサイトの項目を削除し、メールアドレスを入力必須項目から外し、名前だけを必須にするようなフォームを作りたかったのです。

    WordPressのメジャー アップグレードの際には、その都度テンプレートのコードを書き直す、という手間さえかけてきたのですが、それが今回、WordPress4.4へのアップグレードからテンプレートの仕様が変わって、以前の方法が通用しなくなってしまいました。

    というわけで、何か他の方法はないかと検索したところ、なんと以前よりも簡単なカスタマイズをみつけましたのでメモしておきます。

    WordPress4.4で掲示板を作る

    掲示板を作成する手順は「wordpressで掲示板を作る」と同じです。
    手順②の「メールアドレスは入力必須項目から外し、webアドレスの入力フォームは削除する。」という部分を変更します。

    (A),(B)の2パターンメモしておきます。

    (A)名前は入力必須にして、メールアドレスは入力しなくても承認されるようにし、ウェヴサイトの項目は削除する場合

    keijibann01
    • WordPressのディスカッションの設定で、「名前とメールアドレスの入力を必須にする」のチェックを外します。(チェックを入れるとメールアドレスの項目にも必須マーク(*)が付いてしまうため。)
    • テーマのfunctions.phpに以下のコードを追加します。
    • 自動的に代替メールアドレスが表示されるようになります。
    
    //コメントフォームの変更
    
    // コメントからウェブサイトを削除
    function my_comment_form_remove($arg) {
    $arg['url'] = '';
    return $arg;
    }
    add_filter('comment_form_default_fields', 'my_comment_form_remove');
    
    //名前は必須項目にする
    
    function preprocess_comment_author( $commentdata ) {
     if ("" === trim( $commentdata['comment_author'] ))
     wp_die('お名前を入力して下さい。');
     return $commentdata;
    }
    add_filter('preprocess_comment', 'preprocess_comment_author', 2, 1);
    /* comment-template.phpの配列$argsのカスタマイズ */
    add_filter('comment_form_defaults', 'comment_form_customize_args');
    function comment_form_customize_args($args) {
     // コメントフォームの前の文言を変更
     $args['comment_notes_before'] = '
    
    お名前は必須項目です。
    メールアドレスが公開されることはありません。
    
    ';
     return $args;
    }
    
    //メールアドレス項目を入れたときの設定(未入力時は自動でメールアドレスを設定する)
    
    if (basename($_SERVER["REQUEST_URI"]) == "wp-comments-post.php") {
     if ($_POST['email'] == null || $_POST['email'] == '') {
     $_POST['email'] = 'guest@example.com';
     }
    }
    

    (B)名前を必須項目にして、メールとウェヴサイトの項目を削除する場合

    keijibann00
    • WordPressのディスカッションの設定で、「名前とメールアドレスの入力を必須にする」にチェックを入れます。(名前のところに必須マーク(*)を付けたいので)
    • テーマのfunctions.phpに以下のコードを追加します。
    
    //コメントフォームの変更
    
    // コメントからEmailとウェブサイトを削除
    function my_comment_form_remove($arg) {
    $arg['url'] = '';
    $arg['email'] = '';
    return $arg;
    }
    add_filter('comment_form_default_fields', 'my_comment_form_remove');
    
    /* comment-template.phpの配列$argsのカスタマイズ */
    add_filter('comment_form_defaults', 'comment_form_customize_args');
    function comment_form_customize_args($args) {
     // コメントフォームの前の文言を変更
     $args['comment_notes_before'] = '
    
     お名前は必須項目です。
    
    ';
     return $args;
    }
    
    //自動でメールアドレスを設定する(メールアドレス項目を削除した場合も設定する)
    
    if (basename($_SERVER["REQUEST_URI"]) == "wp-comments-post.php") {
     if ($_POST['email'] == null || $_POST['email'] == '') {
     $_POST['email'] = 'guest@example.com';
     }
    }
    

    以前はWordPress本体のテンプレートを2個書き直していましたが、今度はテーマのfunctions.phpに追加記述するだけなので、WordPressの メジ’ャー アップグレードのたびに書き直す必要がなくなり、ちょっと楽になりました。

    下記ブログを参考にさせていただきました。
    下記ブログを参照して、自分なりのカスタマイズを試してみることをお勧めします。

    ・WordPressのコメント入力欄から不要な項目を消す方法

    IE8のレイアウト崩れは直ったみたいですが・・・

    20150705-0一昨日「ブラウザチェックツールを使ってみたらIE8で完全にアウトだった!!」に書いたように、「IEテスタ」をインストールしてIEのバージョン5.5~11をチェックしてみたところ(5.5と6は仕方ないとしても)8でもレイアウトが崩れていて愕然としました。
    レイアウトの崩れと言えば、やはりcssの書き方、特にfloat、margin、paddingの扱いに原因がありそうなので、cssを精査してみました。

    私のブログはWordPresssのデフォルトテーマ「Twenty Twelve」バージョン 1.7をカスタマイズして作成しているので、「Twenty Twelve」のcssと見比べながら、不要なfloatを見つけて削除し、それでも崩れが直らず焦りましたが、最終的には下図のようにbodyに

    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;

    を追記したところでレイアウト崩れが直りました。
    左側が「Twenty Twelve」のcss。右側が修正後の当ブログのcss。あれ?これで良かったのか?

    2015070703
    まあ、崩れが直ったんだからいいじゃないかって思いたいのですが、他にきちんとした対応の仕方があるのじゃないか?他のブラウザではもっと酷いレイアウト崩れを起こしているのではないか?と不安が募るのは私が知識不足である証拠です。
    この夏には、是非ともHtml5とcss3を学習しておきたい。

    それにしても、IEのバージョン格差は何とかならないものか?
    ブラウザに関しては世界統一を望みます。

    ブラウザチェックツールを使ってみたらIE8で完全にアウトだった!!

    20150705-4そろそろHTML5について本気で勉強しなければと本を購入しました。
    と、その前に久しぶりにブラウザチェックをすることに。
    Windows7を使い始め、ブラウザをGoogle Chromeに変えてからというもの、IEの存在を忘れつつありました。
    しかしWeb上ではまだまだIEを使っている人が多いはず。そこでIEに特化したブラウザチェックツールを手に入れることに。

    「IEなどの複数のブラウザチェックができる便利な無料ツールまとめ (NESTonline Blog)参照」

    上記サイトで紹介されていた、無料ソフトIEテスタ」をインストールしてみました。
    これがなかなかの優れもので、IE5.5~11まで一括して動作確認ができます。
    ダウンロードサイトはこちら → http://www.my-debugbar.com/wiki/IETester/HomePage

    下図がIEテスタ」上の表示画面です。

    20150705-1

    予想していたことですが、IE5.5と6ではレイアウトがガチャガチャに崩れていて観れたもんじゃありませんでした。でももう対応する能力がなくIE6以前については諦めることにしました。
    しかし、残念なことにIE8でも下記図のごとく崩れていました。
    いつからこんな姿になっていたのか?
    Windows XPのサポートが終了しているとは言え、IE8を使っている人は多いと思われるので何とかしなければと思うのですが、今日のところはどこをどう修正したらよいのか分からずじまい。
    しばらくは御見苦しい姿をさらしたままということになりそうです。

    20150705-0

    こちらは携帯やタブレットなどの表示を確認できるサイト「Responsive Design Testing」です。インストール無し、登録不要、web上で無料で利用できます。お手軽ですね。
    20150705-2

    RSSフィードから更新タイトルと日付を取得して更新情報を表示する

    htmlページなどに、ブログの更新情報を表示する方法をメモしておきます。

    当サイトでは、トップページ(htm)に、ブログやギャラリーの新規投稿記事のタイトルと日付が自動更新されるように設定しています(下図の赤線枠部分)。
    これはGoogleの提供するGoogle AJAX Feed APIを利用して、RSSフィードを読み込むというものです。

    toppage

    私が表示したい更新情報のスタイルは、

    日付 ..記事のタイトル

    とシンプルなものですが、取得したいRSSフィードは6個。数が多いので、スクリプトコードはhtmに直接記述せず、外部ファイルとして読み込むことにしました。

    私なりの手順は以下の通り。

    1. Feedを取得するコードを記述したJavaScriptファイルを6個作成し、一つのフォルダに入れる。
    2. 更新情報を表示したいhtmlページの<head>~</head>にGoogle AJAX Feed APIと6個のjsファイルを読み込むコードを記述する。
    3. 更新情報を表示したいページの<body>~</body>にFeedのIDを記述。
    4. cssでレイアウトを整える。

    1.JavaScriptファイルのコード

    
    // Feed1のコード
    google.load("feeds", "1");
    
    function initialize() {
    var feed = new google.feeds.Feed("表示させるRSSフィードのURL");
    feed.setNumEntries(表示させたい件数);
    feed.load(function(result) {
    if (!result.error) {
    var container = document.getElementById("feed1");
    for (var i = 0; i &amp;lt; result.feed.entries.length; i++) {
    var entry = result.feed.entries[i];
    var dd = new Date(entry.publishedDate); // now
    var yearNum = dd.getYear();
    if (yearNum &amp;lt; 2000) yearNum += 1900;
    var m = dd.getMonth() + 1;
    if (m &amp;lt; 10) {m = "0" + m;}
    var d = dd.getDate();
    if (d &amp;lt; 10) {d = "0" + d;}
    var date = yearNum + "." + m + "." + d + " ";
    container.innerHTML += "&amp;lt;li&amp;gt;&amp;lt;span&amp;gt;" + date +" &amp;lt;/span&amp;gt;" +"...&amp;lt;a href='" + entry.link + "' target='_blank'&amp;gt;" + entry.title + "&amp;lt;/a&amp;gt;&amp;lt;/li&amp;gt;";
    }
    }
    });
    }
    google.setOnLoadCallback(initialize);
    

    上記のコードの「表示させるRSSフィードのURL」とfeedのIDナンバー部分を2,3,4・・・と書き換えて、6個のJavaScriptファイルを作成。

        IDナンバーは、ここを書き換える。↓
    google.load(“feeds”, “2“);
    var container = document.getElementById(“feed2“);

    それぞれfeed1.js、feed2.js・・・と名前を付けてフォルダに保存する。フォルダ名はjsとした。

    2.<head>~</head>

    &amp;lt;script type="text/javascript" src="http://www.google.com/jsapi"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed1.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed2.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed3.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed4.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed5.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    &amp;lt;script type="text/javascript" src="feed6.jsまでのパス"&amp;gt;&amp;lt;/script&amp;gt;
    

    htmの<head>部分に、外部ファイルを読み込むコードを記述します。

    3.<body>~</body>

    <body>部分の更新情報を表示したい箇所にFeedのIDを記述します。

    &amp;lt;ul id="feed1"&amp;gt;&amp;lt;/ul&amp;gt;
    &amp;lt;ul id="feed2"&amp;gt;&amp;lt;/ul&amp;gt;
    ・・・・以下略
    

    4.cssでレイアウトを整える。

    必要に応じて、cssでレイアウトを整えます。

     下記のサイトを参照させていただきました。

    参照したサイト:「サイトに外部ブログのRSSを表示する方法と、記事タイトルが長すぎる場合に省略表示する方法メモ。」(http://webimemo.com/web/3873

    日付やタイトルだけでなく、 記事内容や概要、画像なども表示したい場合は下記サイトを参考にされるといいと思います。

    ブログのRSSを読み込んで新着記事を表示!Google AJAX APIを使ってみました」(http://kana-lier.com/javascript/google_ajax_rssfeed/

    WordPressをローカル環境で動かすWordPress Portable

    WordPress Portable(ワードプレスポータブル)というのがあるそうです。
    XAMPPと同じように、WordPressをローカル環境で動かすことができる、WordPress専用のアプリケーションです。
    WordPressのカスタマイズには、レンタルサーバーにアップする前に、ローカル(自分のPC内)でテストできる環境がある方が、断然便利で安全です。
    WordPress PortableはXAMPPより設置が簡単、データベースの設定も不要だそうです。
    ただし、マックには対応していないらしい。

    001私もどんなものなのか試してみたかったのですが、 既にXAMPPを導入している場合、まずXAMPPをアンインストールしなければならないようなので、WordPress Portableの設置は諦めました。
    WordPressユーザーで、まだローカル環境の構築をしてない方は、 試す価値があると思いますので、紹介してみました。
    興味のある方は、下記サイト等を参考にしてみてください。

    サイバー攻撃に早まって・・

    今週頭から夏風邪をひいて、ついに3日間寝込んでいました。発熱が続き一向に良くなる気配がないので、仕方なく今朝は病院に行き、1時間半の点滴。脱水症状と酸素不足だとか。
    「夏風邪のウィルスに抗生物質は効かないんだけどね」と言いつつ医者は、二次感染を防ぐためだからと、抗生物質を出してくれましたが、これはちょっと不要な薬だなって思います。

    それはともかく、私がウィルスに襲われて弱っている間に、私のブログは大変なことになっていました。 私が利用している「ロリポップ!レンタルサーバー」がサイバー攻撃され、WordPressの利用者に対し不正アクセス、データ改ざんが行われたとのこと。
    私のブログも見事に文字化けし、管理画面もぐちゃぐちゃ。管理画面に不正侵入した証にブログタイトルが、「Hacked by Krad Xin」と書き直されています。
    まったく弱り目に祟り目というか・・・。

    私はサイトに複数個WordPressを設置していますが、今のところ、被害にあったのはそのうちの1個だけ。アドレスにwordpressの文字が入ったものだけでした。
    被害が少ないうちにデーターベースのパスワードを変更しておこうとロリポップのデータベースを開こうとしたら、覚えのないパスワードに変えられていました。これもハッカーの仕業か?と焦りましたが、実はロリポップの方で、パスワードとwp-config.phpファイルの設定、及びパーミッションなどを書き換えているようです。

    さて、この荒らされたブログをどう修復するか?
    どこをどう改ざんされたか分からないブログを修復するよりは、この際、最初から作り直してついでにアドレスからwordpressの文字もなくしてしまおうと、私はブログをまるごと削除してしまいました。
    データベースのバックアップがあるから大丈夫、と深く考えもせず、やってしまいました。
    しかし、バックアップデータをデータベースにインポートしようと何度試みてももうまくいかない。
    何が悪いのか、半端知識では理解できない。
    残っているのは、画像無しのテキストデータだけ。

    何故ブログを削除する前に、文字化けを修復することを考えなかったのか、悔やまれます。
    文字化けは案外簡単に復旧できるようです。ロリポップサイトに、
    2013/08/31 改ざんされたサイトの復旧方法について」というお知らせがあることに、あとから気づいて「しまった!早まった」と思いましたが、もう後の祭りです。
    データ改ざんが文字化けとウィジェットのテキスト変更程度なら、あとはログイン名やパスワードを変更するだけで良かったかも。もちろん被害がそれだけでおさまっていればですが。
    もしかしたら私がハッカーを買いかぶり過ぎていたのかも。もっとスゴイことされるんだって、ビビり過ぎだったかも知れません。

    しかし、削除してしまったデータは戻らないので、当分はテキストデータを一つ一つ見直して、画像がPCに残っているものや新たに画像を取得できる投稿について順次アップして行こうと思います。これを機にブログをすっきり整理していければいいかなと。

    今回の犯人は自分のFacebookで自分の仕事ぶりを随分自慢しているらしいです。ハッキングしたサイトのURLをリスト化しているというので見てみました。日本のサイトがターゲットにされたのは間違いないようです。 しかし、まあ、犯人のFacebookに対し、「いいね!」を押している人が多いのには呆れますね。

    9月2日追記:
    夜、ロリポップから「▽サイト改ざんへの対策をお願いいたします – ロリポップ!」http://lolipop.jp/security/というメールがありました。
    データの改ざんパターンが多数報告されているそうで、「データ改ざんが文字化けとウィジェットのテキスト変更程度」というわけではなかったようです。やはりハッカーを甘く見てはいけないってことでしょうか。
    指定ファイルを開いてみると、「webサイトが改ざんされてしまったら」、以下の作業が必要とのこと。

    最後に 次の注書きがありました。

    ※お使いのパソコンにバックアップファイルがある場合は、一度サーバー上のファイルを削除した後にバックアップファイルをアップロード。その後、ディレクトリのパーミッションを「705」に変更することでも対応は可能です。

    もっと早く教えて欲しかった!!!

    ギャラリーをWordPressでリニューアルしました。

    WordPressはテーマやプラグインが豊富に提供されていることや、カスタマイズの自由度が高いところが魅力ですが、それだけでなくセキュリテイの強化、アクセス向上にも効果的なソフトウェアです。
    個人サイトであってもWordpressを利用すると、明らかにアクセス数が増えます。
    もっと多くの人に作品を紹介したい。知ってもらいたい。そのためにも、ギャラリーをWordpressに移行したいと考えていましたが、Wordpressを使い始めて3年、ようやく実現しました。

    リニューアルに伴い、アドレスも変わりましたので、お気に入りに入れてくださっている方は、ブックマークの変更をお願いいたします。

    山田利喜子さん「皮革染色工芸」の新しいアドレスはhttp://art-container.net/galleries/kawa/です。使用したテーマは、「Wpshower(http://wpshower.com/)」のフリーテーマ「Imbalance 2」

    kawaTOMOKO・T・TORIBATTAさん「銅版画」の新しいアドレスはhttp://art-container.net/galleries/hanga/です。使用したフリーテーマは「WordPress.ORG/themes」に紹介されていた「Polaroids」

    hanga通畠義信さん「鉄のオブジェ」の新しいアドレスはhttp://art-container.net/galleries/tetu/。使用したフリーテーマは、「Wpshower(http://wpshower.com/)」の「Paragrams」

    tetu作品のショップアドレスはhttp://art-container.net/galleries/です。使用したフリーテーマは「Shaken and Stirred Web」の「Shaken Grid (Lite) Free!」(←リンク切れています)
    shop

    以上、ギャラリー向けのシンプルなテーマばかりです。
    テンプレートやcssを書き換え、プラグインも追加して使用していますが、自力で一から作り上げるのは、私には無理。こんな高品質なテーマが無料で提供されているなんて嬉しい限りです。

    今回はWordpressをもう一個インストールし、一個のWordpressで複数のブログサイトを構築できる「マルチサイト」機能を使って、4つのサイトを作成しました。
    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() ) : ?>タグの、すぐ上に移動させます。

    個別ページにもサイドバーを表示させる

    wordpressは膨大な量のテーマが用意されていて、無料で選びたい放題、というところも魅力の一つです。デザインも豊富にありますが、テーマの仕様や機能に、それぞれ微妙な違いがあるので選択に迷います。
    しかし、まあ、どんなにたくさん提供されても、欲を言い出すときりが無く、完璧にそのまんま使えるテーマって意外とないような気がします。

    今私が使っているテーマでは、個別ページを開くとサイドバーが表示されません。wordpressのデフォルトのテーマもそういう仕様になってるので、ま、それが普通なのだろうと思っていたら、個別ページにサイドバーが表示されるテーマも多くありました。
    その違いはどこにあるのか、テンプレートをじっと見比べてみると、どうやらsingle.phpにsidebar.phpを読み込む一行があるかどうかだけの違いのようです。

    single.phpの変更箇所
    最後の行にある<?php get_footer(); ?>の前に<?php get_sidebar(); ?>を追加する。

    single.phpを変更しただけだと、カラム落ちするので、style.cssのシングルページ関連箇所で幅や余白の修正をします。