wordpress」タグアーカイブ

イラスト素材ブログ「アトコンの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というファイルを新規に作成します。
コードは下記のようにしました。

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

  <?php endwhile;?>
  <?php else:?>
  <p>記事はありませんでした</p>
  <?php
endif;
wp_reset_postdata();
?>
<br style="clear:both;">

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


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

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

<?php wp_related_posts()?>

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の メジ’ャー アップグレードのたびに書き直す必要がなくなり、ちょっと楽になりました。

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

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