【WordPress】表がうまく表示されない時は「TablePress」がオススメ!

先日、BIC SIMのことについてレビュー記事を投稿した際に、料金表を載せましたが、実は表を挿入するときにちょっとしたトラブルがありました。

「TinyMCE Advanced」という表を作成できる拡張プラグインをインストールしてあるのですが、表を挿入しても罫線が表示されないという現象が発生しました。

これは使っているテーマに依存する問題だと思うのですが、スタイルシートに定義を試みても改善されなかったことと、もっと手軽に表を挿入したいと思い、別のブラグインを試してみることに。

今回は「Table Press」というプラグインを紹介します。

 

インストールから初期設定まで

Tablepress1

 

プラグインは管理画面からインストール可能です。

プラグインの新規追加から、「tablepress」で検索してインストールし、有効化してください。

Tablepress2

 

有効化すると、サイドバーに「TablePress」メニューが表示されるので、そこから表の作成に入ります。

Tablepress3

上部の新しく追加タブを選んで、テーブルの名前や行数、列数を入れて「テーブルを追加」をクリックすれば表が完成します。ちなみに、行数や列数は後で増やしたり減らしたり出来ますので安心してください。

 

Tablepress4

「すべてのテーブル」タブを選択すると、作成した表が表示されているはずです。

これで表の大枠は完成です。次に表の内容を作っていきます。

 

文字の装飾はタグ付けしてキレイに整形

Tablepress5

これが以前作成したのBIC SIMの料金表の記述です。

ちなみに、

Tablepress6

セルを選択すると、行が広がって編集しやすくなります。

今回は文字の大小を付けたかったので、「span class」で多少装飾しました。

 

見出し行やセルの結合はオプションパネルで操作OK!

1行目と5行目は見出しなので、ブルーの背景になっていますが、

Tablepress7

オプションパネルでチェックするだけ。

 

また、2行目や5行目はセルを結合させているので「colspan」が入っていますが、結合させたいセルの一番左のセルに文字を入れ、その右側のセルを選んで「テーブルの操作」パネルの「セルを結合」を選択すれば自動でタグが挿入されます。

Tablepress8

 

直感的で判りやすい!

最後に「変更を保存」して完成です。

実際に表示させてみるとこんな感じ。

Tablepress9

キレイに表示されました!!

使っているテーマにも依存するのかもしれませんが、思ったように表が作れないなーと思われている方は試してみてくださいね。

【WordPress】「この記事が気に入ったら いいね!しよう」を投稿ページに設置する方法

このサイトでは、WordPressテーマ「マテリアル」を使用していますが、Facebookのいいねボタンや、Twitterのフォローボタンは右側のサイドバーに標準で搭載されています。

 

これだけでも充分高機能なのですが、せっかく記事の最後まで読んていただいても、その時にちょうど「いいねボタン」「フォローボタン」がサイドバーに表示されているとは限りません。

各記事の最後の部分にボタンが表示されていると、ボタンを押してくれる確率が高くなるかな?と思い調べてみました。

今回、こちらのサイトを参考にさせていただきました。

有名なまなしばさんのサイトです。月間50万PVという私から見たらマンモスサイトですね。
※まなしばさんにはページの引用を快く承諾いただきました。ありがとうございます!

 

single.phpにコードを記述していく

設置手順はほぼまなしばさんのサイトのままでオッケーです。

「マテリアル」では、すでにサイドバーに同様のボタンが実装されているので、bodyタグ直後のスクリプトの記述は不要です。

単一の投稿ページは「single.php」というファイルに記述するのですが、これは標準では子テーマの中に入っていません。

親テーマのファイルにそのまま記述しても構わないのですが、編集はできれば子テーマのほうに行ったほうがベターなので、「single.php」を子テーマにコピーすることから始めます。

手順は、以前の記事にありますので、以下のページを参照してください。

 

子テーマの中に「single.php」をコピーできたら、「外観」-「テーマの編集」と進み、「single.php」を選びます。

いいねボタン1

いいねボタン2

 

場所は、Adsenseのすぐ下の部分にコードを追記します。

<?php get_template_part("ad_336") ?>

<!-- ここから -->

<!-- 記事がよかったらいいね ここから -->
<?php if (is_mobile()) :?>
      <div class="p-shareButton p-asideList p-shareButton-bottom">
        <div class="p-shareButton__cont">
          <div class="p-shareButton__a-cont">
            <div class="p-shareButton__a-cont__img" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
            <div class="p-shareButton__a-cont__btn">
              <p>この記事が気に入ったらいいね!しよう</p>
              <div class="p-shareButton__fb-cont p-shareButton__fb">
                <div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                <span class="p-shareButton__fb-unable"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="p-asideFollowUs__twitter">
          <div class="p-asideFollowUs__twitter__cont">
            <p class="p-asideFollowUs__twitter__item">Twitterで〇〇名前を</p>
            <a href="ここにTwitterアカウントのURLを入れる" class="twitter-follow-button p-asideFollowUs__twitter__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @アカウント名</a>
            <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
          </div>
        </div>
 </div>
<?php else: ?>
<div style="padding:10px 0px;"></div>
<!-- 記事がよかったらいいねPC -->
            <div class="p-entry__push">
              <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
              <div class="p-entry__pushLike">
                <p>この記事が気に入ったら<br>いいね!しよう</p>
                <div class="p-entry__pushButton">
<div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                </div>
                <p class="p-entry__note">最新情報をお届けします</p>
              </div>
            </div>
                        <div class="p-entry__tw-follow">
              <div class="p-entry__tw-follow__cont">
                <p class="p-entry__tw-follow__item">Twitterで〇〇名前をフォローしよう!</p>
                <a href="ここにTwitterアカウントのURLを入れる" class="twitter-follow-button p-entry__tw-follow__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @ツイッターアカウント名</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
              </div>
</div>
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->

<!-- ここまで -->

<h2 class="share">シェアする</h2>

色のついていない部分を挿入です。

あとは、「function.php」へのスマホ用の定義の記述と、「style.css」への定義の追加を行います。

「function.php」への記述が行われていないと、ページが最後まで表示されなくなってしまいますので、忘れずに行ってください。

 

さて、この状態でページを表示させてみると・・・

いいねボタン3

きれいに表示されました。

ところが、ここで問題が!!!

 

コメントボックスが途中で切れてしまう場合の対処法

ここでいいねボタンを押すと、ポップアップ画面が表示されるのですが、

いいねボタン4

なんとボックスの右半分が途切れてしまっています。

ここで困ってしまって、色々調べて見たのですが、どうやらメインカラムの外側にはみ出る部分はどうしても表示できませんでした。
※もしかしたら方法があるのかもしれないですけどね・・・

なので、ここは発想の転換で、ひらめきました。

左右を入れ替えればいいのでは??

そうだ、その手があるじゃないか!

いいねボタン5

このように「アイキャッチ画像」と「いいねボックス」を左右入れ替えれば自然です。

早速、「single.php」を下のように変更しました。

<!-- 記事がよかったらいいねPC -->
            <div class="p-entry__push">
              <div class="p-entry__pushLike">
                <p>この記事が気に入ったら<br>いいね!しよう</p>
                <div class="p-entry__pushButton">
<div class="fb-like" data-href="ここにFacebookページのURLを入れる" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
                </div>
                <p class="p-entry__note">最新情報をお届けします</p>
              </div>
              <div class="p-entry__pushThumb" style="background-image: url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>')"></div>
            </div>
                        <div class="p-entry__tw-follow">
              <div class="p-entry__tw-follow__cont">
                <p class="p-entry__tw-follow__item">Twitterで〇〇名前をフォローしよう!</p>
                <a href="ここにTwitterアカウントのURLを入れる" class="twitter-follow-button p-entry__tw-follow__item" data-show-count="false" data-size="large" data-show-screen-name="false">Follow @ツイッターアカウント名</a>
                <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
              </div>
</div>
<?php endif; ?>
<!-- 記事がよかったらいいね ここまで -->

PCの部分だけ、サムネイル挿入のタグを後ろにずらしています。

その結果、

いいねボタン6

見事コメントボックスが切れずに表示されるようになりました。

素晴らしい!美しい!!

 

一手間加えるだけで雰囲気が変わるのもWordPressのいいところ

ちょっと一手間加えるだけで、全く雰囲気が異なるページが出来上がるのも、WordPressのいいところですね。

テーマを入れ替えたりするのは大変ですし、かと言ってテーマの雰囲気を壊すような大胆な改造もちょっと、、と思われている方、いかがでしょうか。

あ、せっかくなので、この記事の下にある「いいね」も良かったら押しておいていただけるとchaboの大いなるモチベーションになりますのでよろしくお願い致します!

【WordPress】WordPress用テーマ「マテリアル」新着記事に「New!」バッジを導入してみたよ

今日はとても嬉しいことがありまして、昨日公開しましたAnkerさんのモバイルバッテリーの記事を、本家Ankerさんがリツイートしていただいたのです!!

昨日の記事はこちら

 

ありがとうございます!Ankerさん!!

何人の方にはお気に入りに入れていただいたりととても嬉しい一日でした。皆様本当に有難うございます!

昨日は「普段の持ち運び編」でしたが、次は「出張編」も公開したいと思います。

 

さて、本日はWordpress用テーマ「マテリアル」の話題です。

 

マテリアルのトップ記事をもっと目立たせたい!

本ブログのWordpress用テーマである「マテリアル」の追加機能第二弾です。

トップページを見てお気づきの方もいらっしゃるかもしれませんが、

 

新着NEW

ぱっと見て、ブログが更新されたかが分かるように、公開して数日間は赤い「New!」のバッジを実装してみましたので、今日はその方法をご紹介します。

マテリアルでは、トップページの上段に新着記事が、下段にカテゴリ記事が大きく表示されるのですが、まずは上段の新着記事の方にバッジを追加してみます。

 

必要なファイルを一旦ローカルにコピーして編集

前回所要時間機能を追加したサイト同じように、ローカルに親テーマのフォルダから以下のファイルをコピーします。

  • loop.php
  • cat_lists.php

 

親テーマフォルダからダウンロード

「loop.php」が新着記事、「cat_list.php」がカテゴリー記事を表示するファイルです。

まずは、「loop.php」の方から手を入れていきます。

 

loop.php

編集前のファイル

<?php
$row_new = get_row_new_post();   //New postで表示する行数
$count = 1;
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
	<div class="thumb-box sub-color-background">
	<?php if(has_post_thumbnail()){ ?>
		<a href="<?php the_permalink() ?>">
		<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
		</a>
	<?php }else{ ?>
		<a href="<?php the_permalink() ?>" class="no-deco">
		<div class="no-thumbnail"><p>No thumbnail</p></div>
		</a>
	<?php } ?>
	</div><!-- .thumb-box -->
	<div class="post-info">
	<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
	<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<?php get_template_part("sns_count") ?>
	<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
	</div><!-- .post-info -->
	</div><!-- .post -->

 

編集後のファイル

<?php
$row_new = get_row_new_post();   //New postで表示する行数
$count = 1;
?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
	<?php if($count == $row_new*3+1 && !is_paged() && is_home()){ echo "<div class='hide'>"; } ?>
	<div class="post<?php if($count%2==0){echo ' col-2';} if($count%3==0){echo ' col-3';} ?>">
	<div class="thumb-box sub-color-background">
	<?php if(has_post_thumbnail()){ ?>
		<a href="<?php the_permalink() ?>">
		<?php $title= get_the_title(); the_post_thumbnail(array(400, 400), array( 'alt' =>$title, 'title' => $title)); ?>
		</a>
	<?php }else{ ?>
		<a href="<?php the_permalink() ?>" class="no-deco">
		<div class="no-thumbnail"><p>No thumbnail</p></div>
		</a>
	<?php } ?>
	</div><!-- .thumb-box -->
	<div class="post-info">
	<p class="up-date"><span class="lsf">time </span><?php the_time('Y/m/d') ?></p>
	<?php
	$days = 3;
	$today = date_i18n('U');
	$entry = get_the_modified_date('U');
	$news = date('U',($today - $entry)) / 86400 ;
	if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
	?>
	<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
	<?php get_template_part("sns_count") ?>
	<p class="cat-link"><span class="lsf cat-folder">folder </span><?php the_category(' ') ?></p>
	</div><!-- .post-info -->
	</div><!-- .post -->

となります。ちょうど日付の入る行の右側に今回は3日経過していないものに関して、「New!」という文字を挿入しています。

次に、カテゴリ記事も同様にやってみましょう。

 

cat_lists.php

編集前のファイル
※34行目から

					<div class="post-info">
						<p class="up-date"><?php the_time('Y/m/d') ?></p>
						<?php get_template_part("sns_count") ?>
						<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					</div><!-- .post-info -->
				</div><!-- .post -->

 

編集後のファイル
※34行目から

					<div class="post-info">
						<p class="up-date"><?php the_time('Y/m/d') ?></p>
						<?php get_template_part("sns_count") ?>
						<?php
						$days = 3;
						$today = date_i18n('U');
						$entry = get_the_modified_date('U');
						$news = date('U',($today - $entry)) / 86400 ;
						if( $days > $news ){ print '<p style="text-align: right;"><span class="back-red" style="color: #ffffff;">New!</span></p>'; }
						?>
						<h3 class="post-title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
					</div><!-- .post-info -->
				</div><!-- .post -->

となります。今回は、

class="back-red"

というclass定義の背景の色を赤に変更しているので、style.cssに、

.back-red{background-color: #ffccff;}

と記載されているところを、

.back-red{background-color: #ff0000;}

に書き換えます。

 

最後にファイルをアップロードして完成

最後にFTPなどでファイルのアップロードをして完成です。

子テーマフォルダへアップロード

この時、子テーマフォルダである「wp_material_child」にアップロードすることに注意してくださいね。

また、今回は3日をいう期間を設定していますが、日数を変更したい場合は、

$days = 3;

この部分の数字を変更するだけで良いです。

意外と簡単でしょう!?

こうすることで、結構見た目が映えますので、皆さんも是非やってみてはいかがでしょうか。

2015/10/26補足

style.cssには元々「.back-red」classが定義されているので、「追加」ではなく「変更」が正しいですね。
作者のNobuoさんに丁寧に教えていただきました!ありがとうございます!!

【WordPress】テーマ変更!フラットデザイン「マテリアル」で近未来な感じ!

またまたテーマ変更です。

前回のPrincipleの作者である、「Nobuo」さんの最新作、「マテリアル」に変更しました。

なんか、これまでのデザインとはがらりと違った、一枚のホワイトボードに紙が貼ってあるようなイメージですね。

それでいて、スタイリッシュでカッコいい!

http://wp-material.net/category/material-func/

タイル状のフラットなデザインで新着記事が見やすい!

ファーストビュー

新しい記事はこのようにタイル状に表示されるので、一目で一覧がわかりますね。しかもSNSでのシェア数も表示されているという高機能さです。これで無料とはすごいですね。

 

カテゴリの内容が新着の下に表示される

d3bea59c83f0822f3970f3abe30323d1-1024x535

これが斬新ですね。これまではカテゴリ別の記事はサイドバーに配置されるのが常でしたが、こちらはメインカラムに表示されます。発想の転換ですね。

 

ちなみにバナーも変えてみました

風の羅針盤

ま、これはオマケみたいなもので、、いいものがなかったので、自作です。

 

ぜひ皆さんも試してみてください!

【WordPress】カスタマイズ前提のフリーのテーマ4つを厳選!

WordPressは、簡単にテーマを変えられることがひとつの特徴のブログに適したツールです。

サイトの印象は、このテーマ選びにかかっているといっても過言ではありません。

テーマがサイトのコンテンツの趣旨に合っていないと、それだけで読む気が失せてしまいますし、再訪してもらえる確率は限りなくゼロに近くなります。

今日は、自分でブログをカスタマイズすることを前提にした人向けの、出来るだけシンプルで高機能なテーマを4つ、ご紹介したいと思います。

国内製のもの?それとも海外製のもの?

さて、改めてWordpressのテーマを色々と探してみたのですが、実にたくさんのテーマがあります。

パット見て、目を引くのは海外製のものが多いですね。

海外のものは画像を多用したものや、大きめのバナーをトップページに配置しているテーマが多いです。

 

ただ、言うまでもないことですが、画像を多用するとページが重くなります。

そして、このサイトはブログを主体としたサイトですので、何よりも記事の内容を類推できるような配置になっていることが理想です。

そういう視点で見ると、海外のテーマはちょっと使い勝手が悪く見えます。設定も当然すべて英語ですし。

 

その点、国内製のテーマは「文字」が主体です。

まずトップページに小さめの画像と大きなタイトル文字。そして控えめな本文の引用です。

特に最近はブログに特化したテーマが色々と作られていますので、ブログ用途であれば、国内のものがいいんじゃないかな、といろいろ探してみて思いました。

 

イメージですが、海外製のテーマは「新聞」っぽい感じでしょうか。大きな画像とともに細かい文字がつめ込まれているイメージ。対して国内製のものは「雑誌」に近いかもしれません。あるいは中吊り広告ですね。画像より文字でインパクトを与えて読者を引きこもうとする感じです。

有料がいいか、フリーがいいか

国内モノでも、有料のものとフリーのものがあります。

有料のものは、流石に手が込んだ作りです。メニューやカテゴリがタブになっていたり、フェード効果で徐々に表示されるようになっていたり。

価格もそれほど高いわけではないので、ちょっと迷いました。ただ、そういう効果を入れてあると、やはりページが重くなることがネックです。

 

サイトの優良度合いを図る指標に、「直帰率」というものがあります。サイトを訪れたユーザーが、元いたところに戻ってしまう割合を示すものですが、これがサイトの重さに関わってきます。

ページヘのリンクをクリックしたあと、すぐにページが表示されないと、ユーザーはストレスに感じます。

特に最近はスマホのユーザーも増えていますし、ネット環境や端末のスペックも上がっていますので、どのサイトも「表示する速さ」を意識して作られているようです。

 

ですから、あまり重たくなるようなものは避けました。

ということで、今回はフリーなテーマを選ぶことにしたのです。

フリーで有名なテーマを厳選

フリーのテーマでブログ用となれば、定番はいくつかしかありません。私も検討した幾つかのテーマをここで紹介します。

Stinger5ver

http://wp-fun.com/

これは有名なテーマですね。使っている人も非常に多く、これを元にカスタマイズ版のテーマ(子テーマ)を作っている方も多いです。また、レスポンシブデザインにも対応していて、スマホやタブレットなど、画角の小さな端末にも自動で適正にデザインを修正して表示します。今やこの機能は必須ですね。

SIMPLESTER

http://simplester.degitekunote.com/what-is-simplester/

はStinger5を前提とした子テーマになっています。indexの画像が若干ズームするようになっていたり、配置がモダンになっていたりとかなりポップな方向に振ったテーマです。

Gush2

これも有名なテーマです。デフォルトでは「素」の状態に近いので、ある程度カスタマイズが必要だと個人的には思います。こちらもレスポンシブ対応。

Simplicity

Simplicityの特徴

これが今一番人気があるのかな、と思います。レスポンシブ対応でその名の通りシンプル。モノトーンなデザインですが、デフォルトでもある程度は整っているので、そのままでも行けそうな感じです。とはいえ、少しは手を入れないと、個性が出ませんけど。

 

どれもシンプルで背景は白。文字は大きめでブログ向きです。

ぜひ皆さんも無料のテーマを活用して、自分らしいブログを作ってみてくださいね!

【ReadyNAS】ReadyNASでWordPressは使えるのか

NASというのは、基本的にファイルサーバとして使い、その用途としては、PCのバックアップ先であったり、複数の人のファイル共有であったり、個人ユースであれば、メディアサーバなどの用途が主かもしれない。

だが、折角Linuxが動いていて、それだけにしておくのは勿体ない。いろいろな役割を持たせて、いろいろと活用したいと思う。

正直、これまではWindows機をサーバとしていろいろと使ってきた。チューナーをつないで録画機として使っていたこともある。ただ、先日も書いたようにもう我が家のサーバは10年選手。老朽化まっしぐらだ。

そこでNASを活用したいと考えたら、Windowsでしかできない、チューナー機能を除けば、後はWindowsクライアントのラップトップがあれば特に問題なく、サーバ機能はNASに集約できそうだ。

“【ReadyNAS】ReadyNASでWordPressは使えるのか” の続きを読む