【表示】Twenty Eleven – iPadで2カラム

投稿日時: 2013年3月17日投稿者: UncleC

　このサイトは、WordPressを利用して、テーマは「Twenty Eleven」を使用しています。

　ちょこちょこカスタマイズしたりしているのですが、iPad（初代iPad：縦1024×横768）でこのサイトを表示して見てみると、パソコンでは左にコンテンツ、右にメニュー等、2カラム（2列）で表示されているところが、iPadではメニューは下の方に回り、メインの記事の内容が、ドーンと全体に大きく表示されます。

　これは、レスポンシブデザインと呼ばれ、iPadに限らずiPhoneなど、デバイス（画面）の解像度に応じてウェブサイトを最適化して表示するものです。

　はじめのうちは、iPadでは大きく表示されて見やすいかも、などと思ってましたが、最近ではパソコンで見るのと同じように２カラムで表示（メニューも左側に表示）しても問題ないんじゃない？などと思われたため、ちょっと変更にトライしてみました。
（というか、基本以下のサイト情報そのままですが ^-^;) ）

続きを読む Read more … »

参考サイト（WordPressのサポートHP）
WordPress › Support » [Theme:Twenty Eleven]Sidebar gone on frontpage when using mobile

　変更内容　@media (max-width: 800px)

　レスポンシブデザインでiPadの表示を指定している個所は、テーマ「Twenty Eleven」のスタイルシート（style.css）の@media (max-width: 800px)と記載されている個所。
(2286行目あたりのResponsive Structureと記載のある個所)

　この@media (max-width: 800px)で定義されている内容の再定義が必要です。
　そこで、以下改めて2カラムで表示するように以下の内容をスタイルシートに追加します。
　（右メニュー、左メニュー、両方の内容が含まれています）
　（マージン等の数値は、サイトに合わせて変更してみてください）

@media (max-width: 800px) {
	#page {
		min-width: 500px;
	}
/* keep the sidebar - for right sidebar */
	.right-sidebar #main #content {
        	margin: 0 1% 0 4%;
        	width: 67%;
	}
	.right-sidebar #main #secondary {
		float: right;
		margin: 0 1% 0 1%;
		width: 24%;
	}
/* keep the sidebar - for left sidebar */
	.left-sidebar #main #content {
		margin: 0 4% 0 1%;
		width: 67%;
	}
	.left-sidebar #main #secondary {
		float: right;
		margin: 0 -1% 0 2%;
		width: 24%;
	}
/* correction for 'showcase' template */
	.page-template-showcase-php #main #primary.showcase {
		float: right;
		margin: 0 2% 0 2%;
		width: 96%;
	}
	.page-template-showcase-php #main #primary.showcase #content {
		margin: 0 6% 0 6%;
		width: 88%;
	}
	.page-template-showcase-php section.recent-posts {
		float: right;
		margin-right: 0pt;
		margin-left: 31%;
		width: 69%;
	}
	.page-template-showcase-php #main .widget-area {
		float: left;
		margin-right: -22.15%;
		margin-left: 0pt;
		width: 22.15%;
	}
/* correction for singular posts/pages without sidebar */
	.singular #main #content {
		margin: 0 8% 0 8%;
		width: 84%;
	}
}

　早速 iPadで表示して見ると．．．

　スタイルシートに上記内容を追加後、iPadで表示して見ると、．．．

　おぉ、iPadでも2カラムで表示されるではないですか。右にメニューが出ましたね。これはちょっと感動です。^o^)
　文字数やフォントの大きさの関係で、試しに表示した記事のタイトルは折り返しになりましたが、特に見づらいこともなく、これで行けそうです。^-^)

※）都合上、左にメニューを表示する場合は試してません。
（多分大丈夫とは思います）
※）子テーマ使っている人は、子テーマのスタイルシートに記載してみてください

　補足：シングルページ

　テーマ「Twenty Eleven」において、個別ページ（シングルページ）を独自に2カラムにしている場合、

<?php get_sidebar(); ?>

（を独自に追加して2カラム化している場合などでは）、以下のmarginとwidthの部分（49～50行目）をコメントアウト（/* と */　で囲む）してみてください。
（でないと、シングルページではメニューが記事に重なってしまう等が起きるかもしれません）

/* correction for singular posts/pages without sidebar */
	.singular #main #content {
		/* margin: 0 8% 0 8%; */
		/* width: 84%; /*
	}

【WordPress】に関する本を見てみよう（amazon）

« 続きを隠す Hide …

Check

トップページ > WordPress

【表示】作成者とパーマリンクを非表示に

投稿日時: 2013年3月4日投稿者: UncleC

　WordPressのこのサイト、テーマは Twenty Eleven を使用してますが、暫く使ってみて以下が少し気になりました。

　作成者、パーマリンクの表示

　記事を表示すると、下の方に、作成者 xxx、パーマリンク、が表示されます。

　複数の人が投稿したりする場合には、この「作成者： xxx」は有効かもしれませんが、一人でやってるこのサイトでは不要ですね。　またパーマリンクも別に表示する必要もないかと思いますので、あわせて非表示にしてみましょう。

続きを読む Read more … »

　content-single.php の編集

　記事の表示で、このカテゴリーやら作成者を表示するファイルは「content-single.php」です。　このファイルを少々編集します。
　（子テーマ使っている人は、子テーマフォルダーに一度コピーしてくださいね。　また子テーマ使ってない人は、この機会に是非子テーマを使うようにしてみましょう）

※）子テーマフォルダーについて
子テーマを使っている場合には、ここではその子テーマフォルダー名を「twentyeleven-child」とします。（自分の環境に合わせて読み変えてください）

編集個所 – content-single.php

			$tag_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
			if ( '' != $tag_list ) {
				$utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
			} elseif ( '' != $categories_list ) {
				$utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
			} else {
				$utility_text = __( 'This entry was posted by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );

1) 35行目をコメントアウト（行頭に” // ” を付ける）し、以下を追加します。
（子テーマを使っている場合には、’twentyeleven’ を ‘twentyeleven-child’へ変更）

$utility_text = __( 'This entry was posted in %1$s and tagged %2$s.', 'twentyeleven' );

2) 同じように、37行目をコメントアウト（行頭に” // ” を付ける）し、以下を追加します。
（子テーマを使っている場合には、’twentyeleven’ を ‘twentyeleven-child’へ変更）

utility_text = __( 'This entry was posted in %1$s.', 'twentyeleven' );

　上記2点反映するとcontent-single.phpへ反映すると、以下のようになります。
（子テーマを使っている場合には、’twentyeleven’ を ‘twentyeleven-child’へ変更をお忘れなく）

			$tag_list = get_the_tag_list( '', __( ', ', 'twentyeleven' ) );
			if ( '' != $tag_list ) {
				//$utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
				$utility_text = __( 'This entry was posted in %1$s and tagged %2$s.', 'twentyeleven' );
			} elseif ( '' != $categories_list ) {
				//$utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
				$utility_text = __( 'This entry was posted in %1$s.', 'twentyeleven' );
			} else {
				$utility_text = __( 'This entry was posted by <a href="%6$s">%5$s</a>. Bookmark the <a title="Permalink to %4$s" href="%3$s" rel="bookmark">permalink</a>.', 'twentyeleven' );
			}

　この変更をした後、記事を表示させてみると、．．．

　作成者とパーマリンクの表示は消えました。
　が、「カテゴリー：」、と日本語表示されていたのが、”This entry was posted in “と英語になってしまいましたね。　これは追加したコードの翻訳がされてないからです。

　ということで、翻訳を追加して、日本語表示にしてみましょう。

　日本語化をしてみよう！

　以前「おっと、失礼しました」の文言を変更する際にも利用した、ja.po, ja.mo が必要で、こちらを編集する必要があります。

ja.mo, ja.po を入手
既にあれば良いです。なければ「【表示】「おっと、失礼しました」を編集」を参照
ja.po を直接編集
UTF-8対応しているテキストエディターでまず直に編集します。
テキストエディターは、TeraPadやphpエディタなどがUTF-8に対応しています。
ja.po を専用エディター poedit で保存
2で編集したja.poをpoedit で改めて開いて、そのまま保存。
（これにより ja.moが更新されます）
poedit がない場合には、http://www.poedit.net/download.php からダウンロード
ja.po, ja.mo のアップロード
テーマ（子テーマを使用していれば子テーマ）の「languages」をフォルダーへアップロード

　1は良いとして、2の直接編集ですが、テキストエディターで ja.po　を開いた後、以下２つのコードを追加します。

msgid ""
"This entry was posted in %1$s and tagged %2$s."
msgstr ""
"カテゴリー: %1$s &nbsp; タグ: %2$s"

msgid ""
"This entry was posted in %1$s."
msgstr ""
"カテゴリー: %1$s"

　どの行に追加しても良さそうですが、ここでは分かりやすく元々のものに対して変更、ということで近くに記述して見ましょう。

#: content-single.php:35
msgid ""
"This entry was posted in %1$s and tagged %2$s by <a href=\"%6$s\">%5$s</a>. "
"Bookmark the <a href=\"%3$s\" title=\"Permalink to %4$s\" rel=\"bookmark"
"\">permalink</a>."
msgstr ""
"カテゴリー: %1$s &nbsp; タグ: %2$s  &nbsp; 作成者: <a href=\"%6$s\">%5$s</a> "
"&nbsp; <a href=\"%3$s\" title=\"%4$s へのパーマリンク\" rel=\"bookmark\">この"
"投稿のパーマリンク</a>"

msgid ""
"This entry was posted in %1$s and tagged %2$s."
msgstr ""
"カテゴリー: %1$s &nbsp; タグ: %2$s"

#: content-single.php:37
msgid ""
"This entry was posted in %1$s by <a href=\"%6$s\">%5$s</a>. Bookmark the <a "
"href=\"%3$s\" title=\"Permalink to %4$s\" rel=\"bookmark\">permalink</a>."
msgstr ""
"カテゴリー: %1$s &nbsp; 作成者: <a href=\"%6$s\">%5$s</a> <a href=\"%3$s\" "
"title=\"%4$s へのパーマリンク\" rel=\"bookmark\">パーマリンク</a>"

msgid ""
"This entry was posted in %1$s."
msgstr ""
"カテゴリー: %1$s"

#: content-single.php:39

575行目～582行目に対して、584行目～587行目を追加
590行目～595行目に対して、597行目～600行目を追加
をしています。

　この後、ja.po を保存し、次は、ja.po を専用エディター poedit で開いて保存（これにより、ja.moが更新されます）。

　最後は、ja.po, ja.mo をテーマ（子テーマを使用していれば子テーマ）の「languages」をフォルダーへアップロードして終了です。

　はい、無事、日本語で表示されましたね。　良かったです。 ^-^)

【WordPress】に関する本を見てみよう（amazon）

« 続きを隠す Hide …

Check

トップページ > WordPress

【表示】　子テーマを使って、おっと失礼

投稿日時: 2013年3月1日投稿者: UncleC

　さて、前回、【表示】「おっと、失礼しました」を編集では、なんとか「おっと、失礼しました。」の日本語文言の変更ができました。
　ここでは、テーマのバージョンアップに伴い変更が失われないように、子テーマを使った場合の日本語文言（おっと、失礼しました）の変更にトライしてみましょう。

参考サイト
【WPCOS】WordPressカスタマイズ – 子テーマの言語ファイルを読み込ませて利用する方法

　以下、twentyeleven　の子テーマとして、twentyeleven-child　のフォルダーが作成されているものとします。

　１）　出だしは前回に同じ

ja.mo, ja.po を入手
poedit　を入手
ja.po　を編集
ja.po, ja.mo　をアップロード

　この１～３は前回【【表示】「おっと、失礼しました」を編集に同じですが、最後の、4．ja.po, ja.mo　のアップロード先が異なります。

ja.po, ja.mo のアプロード先
子テーマのフォルダー twentyeleven-child 内に「languages」フォルダーを作成して、その中にアップロード。

　２）　function.php　の作成

　子テーマのフォルダー twentyeleven-child 内に、function.php　を作成し、以下コードを記載します。　（既に function.php を作ってあれば、その中に追記）

続きを読む Read more … »

<?php 
add_action('after_setup_theme', 'child_setup');
if(! function_exists('child_setup')):
function child_setup() {
load_theme_textdomain('子テーマフォルダーのフォルダー名称', STYLESHEETPATH . '/languages'); 
}
endif;
?>

　このコード中の「子テーマフォルダーのフォルダー名称」は、ここでは、twentyeleven-child　となることから、以下のように function.php　へ記述。

<?php 
add_action('after_setup_theme', 'child_setup');
if(! function_exists('child_setup')):
function child_setup() {
load_theme_textdomain('twentyeleven-child', STYLESHEETPATH . '/languages'); 
}
endif;
?>

　３）　404.php　の編集

　変更したい日本語文言「おっと、失礼しました。」は、404.php　にて表示されます。
　そこで、404.php　を子テーマフォルダー twentyeleven-child 内にコピーし、その後「おっと失礼．．．」に相当する以下の個所の修正をします。

修正前

<header class="entry-header">
<h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentyeleven' ); ?></h1>
</header>

　この中の、’twentyeleven’ を、子テーマを指すように子テーマフォルダーの名称 ‘twentyeleven-child’　に変更します。

修正後

<header class="entry-header">
<h1 class="entry-title"><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentyeleven-child' ); ?></h1>
</header>

　さて、後は前回同様、試しに存在しないURLとして /testを指定（www.chiangmailongstay.com/test）してアクセスして見ると．．．

おぉ、前回同様、変わりましたねー。　いやー、またまた、よかった、よかった。^-^)

【WordPress】に関する本を見てみよう（amazon）

« 続きを隠す Hide …

Check

トップページ > WordPress

【表示】「おっと、失礼しました」を編集

投稿日時: 2013年2月28日投稿者: UncleC

　このサイトはWordPress、テーマは「Twenty Eleven」を利用しています。

　テーマ自体は（WordPressがまだまだ良く分かってないので）シンプルで良いですが、例えば指定されたページが無い場合などに表示されるエラーページで「おっと、失礼しました。」と日本語が表示されたりして、面白いながらも、もう少し普通な言葉に変更して見たい気もします。
（ちなみに元の英語は「This is somewhat embarrassing, isn’t it? 」）

　ネットで検索しても、中々これだ！、という情報に巡り合えません。ソースに日本語を直書きする、という方法もあると思いますが、いやいや、それはちょっと美しくないですね。

　あれやこれやと（かなりの時間）調べた結果、以下のようにすれば変更できることが分かりましたので、早速チャレンジしてみましょう。

続きを読む Read more … »

　１）　ja.mo, ja.po を入手

　テーマ（Twenty Eleven）のフォルダー内に「languages」フォルダーがありますが、まずはその中を見てみると「twentyeleven.pot」というファイルしか見当たりません。
　色々調べてみると、どうも日本語の変更は、「ja.mo」「ja.po」というファイルが必要ということで、早速入手してみます。

ja.mo
以下のURLにアクセスしてダウンロードします。
http://ja.wordpress.org/2011/07/20/wordpress-3-2-1-ja/
（TwentyEleven テーマの”日本語リソース”を選択するとダウンロードできます）
ja.po
以下のURLにあるソースコードをコピーして、メモ帳などのテキストエディターで新規ファイルを作成し、そこへ貼り付け。　その後、文字コードをUTF-8、ファイル名を「ja.po」として保存します。
https://github.com/miya0001/firegoby-2011/blob/master/languages/ja.po

　２）　poedit　を入手

　編集する対象ファイルは、ja.po です。
　このファイルを編集するには、poedit　というソフトが必要ということで、以下からダウンロードします

poeditのダウンロード
http://www.poedit.net/download.php
（Mac版、Windows版があるので、適切なものを選んでください）

　３）　ja.po　を編集

　ja.mo, ja.po　の２つのファイルを同一フォルダーへ置き、ja.po　をダブルクリックすると、poeditが起動します。

　画面を見ると、左側が原文（英語）で、右側が翻訳文（日本語）ですね。
　ここから、目的の日本語の文字列を探して編集しますが、ここでは、該当ページが無い場合に表示される「おっと、失礼しました」の文字列を探して編集します。　画面を少し下の方にスクロールして見ると．．．

　お、ありましたね。　
　フォーカスを合わせると、下方（紫の丸枠部分）にも元の英語と共に「おっと、失礼しました」が表示されます。　この下方の部分で文字列を削除／修正できます。

　では、この「おっと、失礼しました」を、以下のように割と普通な文章に変更してみます。
　「ごめんなさい。目的のページはないようです。」

　修正後は保存します。
　保存することで、もう１つのファイル、ja.mo　も更新されるようですね。

　４）　ja.po, ja.mo　をアップロード

　ja.po　を編集して保存した後は、FTPソフト等を使用し、ja.po, ja.mo　２つのファイルを、テーマのフォルダー（twentyeleven）内の「languages」フォルダーに保存（アップロード）します。

　さて、実際には無いページのURLを入れて、エラーページを表示させてみましょう。
　試しに存在しないURLとして /testを指定（www.chiangmailongstay.com/test）してアクセスして見ると．．．

変更前　（おっと失礼しました）
変更後　（ごめんなさい。目的のページはないようです。）

　おぉ、変わりましたねー。　いやー、よかった、よかった。^-^)

　さて、このままでは、テーマがアップデートされると元に戻ってしまいそうなので、子テーマを使っている場合にはどうしたら良いか、次回チャレンジしてみましょう。
（子テーマ自体がまだ良く分かってないですが．．．）

次回のチャレンジを恐る恐る見てみる
→　【表示】　子テーマを使って、おっと失礼

【WordPress】に関する本を見てみよう（amazon）

« 続きを隠す Hide …

Check

トップページ > WordPress

【投稿】　関連記事の自動表示

投稿日時: 2013年2月21日投稿者: UncleC

　このサイトで使用している「WordPress」に限らず、ブログ系（だと思うんですが）で、記事の最後によく「関連記事」とか「この記事を読んだ人はこんな記事も読んでるよ」的な表示、見かけますよね？

丸で囲ってある部分が関連記事

　結構見に来てくれる人には優しくて便利！、WordPressでは簡単にできてしまうのでは！？、と思って、いつものようにプラグインを調べてみると、．．．あるじゃないですかぁ。^-^)

Related Posts
まぁ、そのまんまの名前ですが、とってもお手軽。　
このプラグインをインストールすると、自動的に関連する記事を表示してくれます。

プラグインの「新規追加」を選択し、「検索画面」から「Related Posts」で検索
見つかったら「いますぐインストール」で、インストール。

続きを読む Read more … »

　これだけで記事単体を表示すると、その下に「Related Post」と表示されるようになります。　また設定でサムネイルとかを表示するようにもできます。
（同一カテゴリーとかで検索して表示しているように見えますが、アルゴリズムは良く分かってません。　まだ記事も少ないので余計に分からないのですが．．．）

　ここで、タイトル部分の「Related Posts」と表示されている文字列は、設定で変更できます。　が、ここでちょっと困りました。

CSSの設定
このタイトル部分、文字列を「＜＜　関連記事　＞＞」に変更するとともに、文字サイズを大きくしたり、上部分にもう少しすき間を設けたい、とカスタマイズしたくなりました。

サイトにログインして左メニューの下の方を見ると、「Related Posts」のメニューが表示されています。　そこを選択すると設定画面が表示されます。
Custom CSS
設定の中に「Custom CSS」の欄があり、タイトル部分の「.related_post_title」を設定すれば表示もおのずと変わるはず．．．ですが、これが変わらない。　（困った）
font-sizeを指定したり、marginを設定しても、変化なし。　でも border: 1px solid red；とか指定すると、境界線がしっかり引けたりするんですね。　なんでだろう．．．
クラスの追加
調べるのも段々と面倒になってきてしまったので、正しくないやり方とは思いつつ、新しいクラスを追加する、といった小手先対策しました。
以下のように、Custom CSS内に「.related_post_title2」を追加して、そこにマージンやフォントサイズの指定を行います。
Related Posts Titleに追加
次に設定画面の上段に「Related Posts Title」の部分があるんですが、ここで直接クラスの指定をします。
<div class=”related_post_title2″>＜＜　関連記事　＞＞</div>
（タイトルは「＜＜　関連記事　＞＞」に変えてます）

　と、こうすることで、実際フォントサイズやマージンが反映されるわけですが、本当はどうしたら良かったんでしょうか．．．
（と思いつつ、多分これ以上追及しないであろう自分を良く分かってます）

【WordPress】に関する本を見てみよう（amazon）

« 続きを隠す Hide …

Check

タイ国チェンマイ・ロングステイ

40代後半で会社を早期退職、妻、愛犬とともにタイへ移住を決意。　さてさて、どんな未来が待っているでしょう。（＾＾ゞ　 ChiangmaiLongStay.com

【表示】Twenty Eleven – iPadで2カラム

【表示】作成者とパーマリンクを非表示に

【表示】　子テーマを使って、おっと失礼

【表示】「おっと、失礼しました」を編集

【投稿】　関連記事の自動表示