• HOME
  • >
  • タグ: wordpress
  • ロリポップでデータベース5.1を8.0にバージョンアップした覚え書き

    MySQLにもサポート期限がある

    先日、「WordPress のバージョンを6.5に更新してください。」という通知が来ました。
    いつものように更新ボタンを押すと、「データベースのバージョンが5.5以上でなければWordpressを更新できない」と言うメッセージが表示され、Wordpressを最新版にすることができませんでした。
    どうやらデーターベースにもバージョンアップが必要らしい、と初めて気づきました。

    ロリポップでデーターベースを確認すると、

    「データベースについては基本的にサポート外とさせていただきます。詳しい知識がある方のみご利用ください。」

    という注意書きがあり、詳しい知識のない私はビビッてしまいました。

    私が使っているデータベースは、15年ほど前のままMySQL 5.1で、とっくの昔にサポートが切れているらしい。2024年現在はバージョン8になっていました。
    データベースは面倒そうだから触らないでおきたかった。けどそうも言ってられない状況になったのでググったところ、とても丁寧に更新手順を書いてくださっているブログがありました。

    参考にさせていただいたブログ

    下記ブログを参考にして、MySQLの知識が無い私でも無事バージョンアップができました。本当にありがたいです。ロリポップ「ライトプラン」を利用している方、私のようにデーターベースの更新作業に不安がある方、おすすめです。

    ロリポップ「ライトプラン」データベースのバージョンアップ手順MySQL5.1→5.6

    KIKU-me

    ここからは自分のための覚書き

    ネット検索によるとMySQLのサポート期間は、8年間だそうです。今後もまた更新作業が必要になるかも知れないので、今回の作業を振り返りってメモしておきます。

    更新作業工程

    1. WordPressのファイルをバックアップする
    2. ロリポップの管理画面でデーターベースにログインする
    3. 更新前のデーターベース【MySQL 5.1】をエクスポートする
    4. 更新前のデーターベース【MySQL 5.1】を削除する
    5. 新しいデーターベース【MySQL8】を作成する
    6. 新しいデーターベース【MySQL8】にデータをインポートする
    7. wp-config.phpを書き換える 
         1)FFFTPに「Visual Studio Code」を関連付ける
         2)wp-config.phpを「Visual Studio Code」で書き換える
         3)FFFTPでwp-config.phpのパーミッションを600に変更する
         4)修正した「wp-config.php」をアップロードする
         5)「wp-config.php」のパーミッションを400に戻す
    1.Wordpressのファイルをバックアップする

    FFFTP


    まず最初に、サイト全体のファイルをバックアップするために、Wordpressの不要なプラグインやテーマなど削除し、ウィジェットなども見直したのちに、フリーソフト「FFFTP」を使用して全てのファイルをダウンロードしました。

    私のことだから、絶対失敗しないとは言えないので、バックアップは必要です。時間はかかったけど、、、


    2.ロリポップの管理画面でデーターベースにログインする

    ロリポップの会員専用画面にログインする。
    「サーバーの管理・設定」⇒「データーベース」を開く。

    「操作する」をクリックする。

    「phpMyAdminを開く」をクリックする。

    ログイン情報を入力して「実行」をクリックする。

    ←(画像はバージョン8.0のもの。「実行」でなく「ログイン」と表示されている)

    3.更新前のデーターベース【MySQL 5.1】をエクスポートする

    エクスポートタブを選択する。

    エクスポート設定の変更箇所

    1)エクスポートの方法⇒「詳細可能なオプションをすべて表示」を選択する。
    2)生成オプション⇒「CREATE DATABASE / USE コマンドを追加する」にチェックを入れる。
    DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT コマンドを追加する」にチェックを入れる。

    以上3の箇所以外はデフォルトのままでOK。⇒「実行」をクリックする。
    任意の場所に出力されたファイルを保存する。

    4.更新前のデーターベース【MySQL 5.1】を削除する

    ロリポップの管理画面からデータベースに戻り、「データーベース削除」ボタンをクリックする。

    「データベースを削除してもよろしいですか?」とメッセージが出るので、「OK」をクリックする。
    「データベースを削除致しました」とメッセージが表示されるので、「OK」をクリックする。

    5.新しいデーターベース【MySQL8】を作成する

    「データーベース作成」ボタンをクリックする。

    • 作成するサーバー・・・「MySQL8.0」が1個だけ表示されていたので、これを選択した。
      (※ロリポップでは今年1月からMySQL8.0が提供されるようになり、以前のバージョンでの新規作成は提供終了となった。)     
    • データベース名、接続パスワード・・・どちらも旧データベースと同じにした。

    「作成」ボタンをクリックする。

    「データベースを作成しました。パスワードは忘れないようにメモされる事をおすすめいたします。」

    とメッセージが出たら「OK」をクリックする。※必ずパスワードをメモしておく

    バージョン8.0のデータベースが作成できた!

    6.新しいデーターベース【MySQL8】にデータをインポートする

    「操作する」をクリックする。

    「phpMyAdminを開く」をクリックする。

    ログイン情報を入力して「ログイン」をクリックする。

    インポートタブを選択する。

    「参照」ボタンをクリックして、エクスポートして保存したSQLファイルを選択する。
     ⇒「実行」ボタンをクリックする。

    「インポートは正常に終了しました」と表示されたら完了。

    7.wp-config.phpを書き換える

    wp-config.phpを開くと下記のような注意書きがある。

    注意:
    // Windows の “メモ帳” でこのファイルを編集しないでください !
    // 問題なく使えるテキストエディタ
    (略)
    // を使用し、必ず UTF-8 の BOM なし (UTF-8N) で保存してください。

    FFFTP上でファイルをクリックしたとき、初期設定のままだとWindows の “メモ帳” が開く。これを任意のエディタが開くように関連づけるオプションがあるらしい。
    長年利用しているアプリなのに、オプション設定を全くしていなかった。この機会にFFFTPに「Visual Studio Code」を関連付けることにした。

    1)FFFTPに「Visual Studio Code」を関連付ける

    • オプション」⇒「環境設定」を開いて「ツール」タブをクリックする。
    • ビューワ」でエディタの実行ファイルを指定する。

    Visual Studio Code」の実行ファイルは下記の場所にある。

    C:\Users\Owner\AppData\Local\Programs\Microsoft VS Code\Code.exe

    これで、FFFTPでファイルをクリックしたら 「Visual Studio Code」で開けるようになった。

    2)wp-config.phpを「Visual Studio Code」で書き換える

    ローカルデスクにバックアップしておいたファイルから「wp-config.php」をクリックして以下の4か所を修正する。

    • データーベース名
    • ユーザー名
    • パスワード
    • データーベースホスト

    パスワード以外の情報は、「ロリポップ管理画面」⇒「サーバーの管理・設定」⇒「データーベース」画面を参照する。

    3)FFFTPでwp-config.phpのパーミッションを600に変更する

    FFFTPで右側のウィンドウにある「wp-config.php」を右クリックして「属性変更」をクリックする

    「現在の属性」600に変更する。

    4)修正した「wp-config.php」をアップロードする

    修正した「wp-config.php」を選択。右クリックしてアップロードする

    5)「wp-config.php」のパーミッションを400に戻す

    アップロードが完了したら必ず「wp-config.php」のパーミッションを400に戻す。

    サイトを開いて正常に表示されているか確認して終了。

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

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

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

    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 (&quot;&quot; === 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[&quot;REQUEST_URI&quot;]) == &quot;wp-comments-post.php&quot;) {
     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[&quot;REQUEST_URI&quot;]) == &quot;wp-comments-post.php&quot;) {
     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ユーザーで、まだローカル環境の構築をしてない方は、 試す価値があると思いますので、紹介してみました。
    興味のある方は、下記サイト等を参考にしてみてください。

    XAMPP をver.1.8.2 にアップグレードする

    WordPressをカスタマイズするには、自分のPCにサーバー環境があった方が断然やりやすい。サーバー環境を構築してくれるXAMPPは、多くの人に利用されている、お勧めできるフリーソフトです。ザンプと読むらしい。

    Apache(Webサーバ)、MySQL(SQLデータベースサーバ)とWebプログラミング言語であるPHPや同目的で使われる>Perlの4つの主要ソフトウェアとphpMyAdminなどの管理ツール、さらにSQLiteなど、いくつかの補助的なソフトウェアとライブラリモジュールが含まれている。(XAMPP – ウィキペディアより)

    私が初めてXAMPPをインストールしたのは、2010年のこと。「ヘッダーやフッターを共有する」から始まる長い話」に書いたとおり、四苦八苦してようやくバージョンは1.7.3をインストールしました。
    2011年には、ver,1.7.4にバージョンアップするつもりが「xampp最新版インストール覚書」に書いたように、結局ver,1.7.3のままで終わったという、情けない私。
    そんなド素人の私でも、これまで毎日XAMPPを活用してきて、私のPCには必要不可欠なソフトウェアとなっています。
    WordPressもどんどん進化しているし、そろそろ、XAMPPもバージョンアップしなければならない時ではないか?
    というわけで、今回XAMPPを最新版ver.1.8.2にアップグレードすることにしました。

    参考にさせていただいたサイトは「プログラミングブログ」の「XAMPP 1.8.0へのアップグレード手順メモ」です。

    1. 1.現在使用中のXAMPPのバックアップをとる。
    2. 2.XAMPPのサイトから最新バージョンをダウンロードする。
    3. 3.XAMPPのコントロールパネルを起動する。
    4. 4.XAMPPのセキュリテイの設定をする。
    5. 5.バックアップの復元
    6. ドリームウィバーのエラー修正

    1.現在使用中のXAMPPのバックアップをとる。

    現在使用中のXAMPPのフォルダ名を「XAMPP1.7.3」とリネームして、そのままCドライブ直下に保存しておきます。

    2.XAMPPのサイトから最新バージョンをダウンロードする。

    http://www.apachefriends.org/jp/xampp-windows.html#2671にアクセスして、「XAMPP Windows版 1.8.2」のZIP アーカイブ をダウンロードしました。
    xampp-0ネット環境のせいばかりではないかもしれませんが、ウチは〝光"じゃないので、ダウンロードに60分くらいかかりました。
    ダウンロードしたzipファイルを解凍して、「XAMPP」のコピーをCドライブの直下に置きます。

    3.xamppのコントロールパネルを起動する。

    「XAMPP」を開いてxampp-control.exeをダブルクリックし、実行します。

    アメリカ国旗とドイツ国旗が表示されますが、アメリカ国旗にチェックが入っていることを確認して、「save」ボタンをクリックします。

    コントロールパネルが立ち上がります。
    (※旧式のコントロールパネルが利用できるというxampp-control-old.exeは、ver.1.8.2には見当たりませんでした。)
    xampp-1

    コントロールパネルで「Actions」の「Start」ボタンをクリックして、ApacheMySQLFileZillaを起動させます。この時、新しいプログラムへのアクセス許可を求めるウィルスセキュリテイのメッセージが出たので、「許可する」をクリックします。
    xampp-2

    http://localhost/xampp/にアクセスしてXAMPPページを開きます。

    xampp-3

    「日本語」をクリックして、XAMPPの〝ようこそージ”を開きます。

    xampp-4

    4.XAMPPのセキュリテイの設定をする。

    左側のメニュー項目から「セキュリテイ」をクリックすると、下記のようなページが開きます。
    xampp-5

    ページに表示されているリンクhttp://localhost/security/xamppsecurity.phpにアクセスして、セキュリテイ設定ページを開きます。

    MYSQL 項目: “ROOT” のパスワードを設定し、「パスワードを変更しました」ボタンをクリックします。

    XAMPPのディレクトリ制御 (.htaccess)のユーザーとパスワードを設定し、「安全なXAMPPディレクトリを作成してください。」ボタンをクリックします。

    ※参考にさせていただいた「プログラミングブログ」の「XAMPP 1.8.0へのアップグレード手順メモ」では、ここで「外部からのアクセスを禁止する」ために、c:/xampp/apache/conf 内にある httpd.confを修正し、c:/xampp/php/php.iniでsafe_modeをOn に変更していますが、httpd.confファイルは、ver.1.7.3とver.1.8.2とでは書かれているコードが異なりますので、ver.1.7.3と同様には修正できないようです。試してみましたが、「アクセス権限がありません」という403エラーが出てしまい、ローカルのウェブサイトが開けませんでした。その辺の知識が無い私には手に余るので、修正するのはやめました。
    私はルーターを使っているから、外部からのアクセスには、まあ安心かと思うのですが、これも自信薄。xamppのver.1.8.2で、外部からのアクセスを禁止する方法を紹介してくれるブログが見つかるのを待つことにします。

    設定が完了したら、コントロールパネルでApacheMySQLを「stop」させ、再び「Start」ボタンをクリックして、再起動させます。

    再びhttp://localhost/xampp/にアクセスすると、パスワード入力画面が表示されます。
    セキュリティー設定の「XAMPPのディレクトリ制御 (.htaccess)」で設定した、ユーザー名とパスワードを入力して、XAMPPページを開きます。左側のメニュー項目からセキュリテイページを開き、ステータスが「安全」になっていることを確認します。
    xampp-6

    5.バックアップの復元

    コントロールパネルでApache、MySQL、FileZilla、Mercury、などを「stop」ボタンで停止させます。

    旧バージョンのXAMPP1.7.3フォルダから、以下のファイルをコピーして、最新バージョンのXAMPPフォルダにペーストします。

    ①バックアップしておいたxampp-1.7.3のhtdocsに置いてある自分のウェブサイトのフォルダを、アップグレードしたxamppのhtdocsにコピーします。

    ②バックアップしておいたxampp-1.7.3のMercuryMailから、アップグレードしたxamppのMercuryMailに上書きします。(※私の場合は必要なさそうな気がするが、、、)

    ③バックアップしておいたxampp-1.7.3のmysql/dataから、アップグレードしたxamppのmysql/dataに上書きします。

    ※「バックアップしておいたxampp-1.7.3のFileZillaFTPから、アップグレードしたxamppのFileZillaFTPに上書きする」を実行したところ下記図のように「匿名のユーザのFTPパスワードが『wampp』のままです。」として、ステータスが「要注意」になってしまいました。xampp-7そこで上書きしたFileZillaFTPを削除して、ver.1.8.2のFileZillaFTPをコピーし直したら、FileZillaFTPのステータスも「安全」と表示されるようになりました。

    コントロールパネルでApache、MySQL、FileZilla、Mercuryなどの「start」ボタンをクリックして起動させ、ローカルホストの自分のウェブサイトにアクセスして、正常に表示されることを確認します。

    ドリームウィバーのエラー修復

    どの段階で、何が災いしたのか分かりませんが、何度目かに開こうとしたDreamweaverが起動しなくなりました。画面はまったく真っ白の状態。
    あれれ?さっきまで、なんてことなく開いたのに~と思っても、開かないものは開かない。

    アドビサイトのDreamweaverヘルプに「ユーザー設定フォルダーを再作成する方法(Dreamweaver CS4/CS5/CS5.5/CS6)」という文書がありました。

    • ・Dreamweaver の起動時にエラーが表示される。
    • ・クラッシュまたは予期しない動作をする。

    という場合の対処法です。手順は以下の通り。

    Dreamweaver を終了します。
    以下のフォルダーを開きます。

    • Windows XPの場合
      C:\Documents and Settings\<ユーザー名>\ApplicationData\Adobe\Dreamweaver <バージョン>\ja_JP\Configuration フォルダーを開き、Configurationの名前を ConfigurationOld に変更します。

    上記のとおりにすると、新しいConfigurationフォルダが自動生成されます。
    再度Dreamweaverを開くと正常に起動しました。なーんだ、簡単!と思ったのもつかの間、Dreamweaverを終了して、もう一度開こうとすると、今度はファイルのスキャンのようなものが始まり、それがなかなか終わらず、挙句に途中でフリーズしてしまう。
    タスクマネジャーを立ち上げて見ると、プログラムが応答していない状態になっている。プログラムを強制終了して、もう一度Dreamweaverを開こうとすると、また、スキャンが始まり、フリーズしてしまい、またまた焦ってしまいました。
    再々度Dreamweaverを開こうとすると、やっぱりファイルのスキャンなのか読み込みなのかが始まったので、今度は強制終了をせず、画面に表示されている「停止する」ボタンをクリックすると、あっけなくスキャンが停止され、Dreamweaverがするっと起動しました。何だ、これは?ってよく分かりませんが、ともかくその後エラーもなく、Dreamweaverは正常起動するようになりました。
    XAMPP1.8.2はコントロールパネルの動きが、旧バージョンに比べてとてもスムーズです。

    次回のアップグレードでは、もっとスマートに作業が完了できるようになっていたいものです。

    2016.4.21【追記】ご注意ください!

    xamppの最新バージョンは2016年4月現在、ver.5.6.19です。
    xamppは2015年7月(ver.5.6.11)から、仕様がずいぶん変わってしまったようです。
    上記方法で最新バージョンをアップデートしようとしたところ、ローカルでファイルの編集や表示はできるのですが、データベースが開けなくなってしましました。

    これは新バージョンのせいなのか、私のデータベースが壊れているせいなのか(その可能性もある)、私にはよくわかりません。
    結局最新バージョンをインストールし、下記ブログを参考にしてパスワードの設定をしました。
    データベースも新規に作成しなおし、Wordpressも新規にインストールして、テーマや投稿のデータをバックアップから復元するという、結構な手間をかけました。

    最新版をインストールしたい方は下記ブログを読んでからにしたほうがいいでしょう。

    参考ブログ
    「2015年7月からXAMPPの導入手順が分かりにくくなりました!対応の方法」
    「【XAMPP】2015年10月から導入手順がまた難解に!対応の方法!securityが無い!」

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

    今週頭から夏風邪をひいて、ついに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のデフォルトのテーマもそういう仕様になってるので、ま、それが普通なのだろうと思っていたら、個別ページにサイドバーが表示されるテーマも多くありました。
    その違いはどこにあるのか、テンプレートをじっと見比べてみると、どうやらsingle.phpにsidebar.phpを読み込む一行があるかどうかだけの違いのようです。

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

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