タグ別アーカイブ: WordPress

2013-6-7 勉強会

コメントをどうぞ

今日は、高橋先生がお菓子（by カバヤ）をたくさん提供してくれました。
ランサーしょうじさん、sa-kaさんは今日もお休みです。。。寂しいな。。。待ってます。。。
勉強会の概要

真中さんの質問：jsが動作しない
真中さんの質問：WordPressへのYouTube動画の貼付け方
パソコン倶楽部りんご運営について
html5で作るWPオリジナルテーマ：2

続きを読む →

独自ドメイン　サブドメインをカラーミーで使用

14件の返信

独自ドメインについて質問です。
ムームードメインで独自ドメインを取得して
http://st-neverland.com/　（ワードプレス）で使用していました。今まで、http://st-neverland.shop-pro.jp/でカラーミーを利用していたのを、サブドメインを設定して　http://shop.st-neverland.com/に変更しました。
http://shop.st-neverland.com/　サブドメインで、カラーミーのショップページは見れるのですが、
http://st-neverland.com/　のページが表示出来なくなりました。
※st-neverland.com という名前のサーバが見つかりませんでした。
と表示されます。
http://st-neverland.com/はワードプレスを表示するはずです。
ワードプレスのログイン画面も表示されません。
ムームードメインで何か設定が必要なのでしょうか？
それとも、ワードプレス？
ロリポップにサブドメインの新規登録?
色々調べたのですが、ドメインの設定方法とか意味がよくわからなくて、質問させて頂きました。
宜しくお願いします。

html5で作るWPオリジナルテーマ：1

コメントをどうぞ

以下の構想で5/31から開始しました。一回、1.5時間で、全4回くらいを目処にやる予定。

目的

WordPressのオリジナルテーマを作成することで、WordPressのテーマ、テンプレートの理解を深める。

内容（予定）

index.htmlをhtml5とcssで作成する。
モバイルファースト＆フラットデザインでindex.htmlをレイアウト＆デザイン
index.htmlを最小の構成でWPテンプレート化する
メニュー、ウィジェットなどWPの機能を使えるように拡張

必要な心構え

WPへの理解を深める他にも、

html5、css、phpのコーディングの練習
レスポンシブWebデザインの練習
フラットデザインの練習

などの練習にもなります。各自、自分の目的に照らし合わせて、何か利用できる事があるはずです。その事を常に頭の隅に置いておきましょう。

必要な環境

個人で使えるWordPressを用意しておいて下さい。個人で使えるサーバをロリポップなどで契約してWPをインストールしておくか、XAMPPやMAMPなど、ローカル環境でWPをインストールしておいて下さい。

html5で作るWPオリジナルテーマ:1

5/30の勉強会から全4回の予定でWPオリジナルテーマを作成します。今回の参加者のスキルレベルは個人でWeb制作を仕事にする人から、html要素やcssをリファレンスを見ながらタイプする人までいますが、まあ何とかなるでしょう。各自、自分の現時点の課題を意識して勉強に望んで下さい。

1-1：ドットインストールの動画を見る

学習を始める前に、ドットインストールさんを見て、作業の概要をつかみました。
#07 ゼロからテーマを作ってみよう
次回の予習としてドットインストールを7回目以降くらいから見ておきましょう。初心者の人は最初からどうぞ。

1-2：作業用のフォルダとindex.htmlファイルを作成

新規フォルダ「wptest」を作って、新規に　index.html　を作成します。文字コードはutf-8にしましょう。
ドットインストールさんの手順を参考にindex.htmlを書いていきましょう。ただし、この授業ではマークアップにhtml5の要素も使います。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
</head>
<body>
<div id="top">
	<header>
		<h1><a href="/">はじめてのWordPress</a></h1>
		<nav>
			<ul>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
				<li><a href="/">menu</a></li>
			</ul>
		</nav>
	</header>
	<div id="main">
		main
	</div>
	<aside>
		sidebor
	</aside>
	<footer>
		footer
	</footer>
</div>
</body>
</html>

<!doctype html>

<html>

<head>

<title>はじめてのWordPress</title>

</head>

<body>

<h1><a href="/">はじめてのWordPress</a></h1>

<nav>

<ul>

</ul>

</nav>

</header>

main

</div>

<aside>

sidebor

</aside>

footer

</footer>

</div>

</body>

</html>

1-2：ブラウザ間の差異をなくす為にnormalize.cssを設置

今回はreset cssを書かずに、normalize.cssを利用します。Downloadをクリックして、開いたページを「wptest」フォルダに”別名でページを保存”しましょう。
normalize.cssについてはコリスさんの記事が分かり易いので、読んでおきましょう。
head要素の最下部に、normalize.cssを読み込んでおきます。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

1-3：style.cssを設置

「wptest」フォルダにstyle.cssを作成します。文字コードはutf-8にしましょう。後で、ちゃんと読み込まれているかを確認し易いように、bodyのcolorを変えてあります。

@charset "UTF-8";
body {
    color:red;
}

@charset "UTF-8";

body {

color:red;

}

head要素の最下部に、style.cssを追加します。

<head>
    <meta charset="UTF-8">
    <title>はじめてのWordPress</title>
    <link rel="stylesheet" href="normalize.css">
    <link rel="stylesheet" href="style.css">
</head>

<head>

<title>はじめてのWordPress</title>

</head>

index.htmlをブラウザで表示して、Firebugなどの開発ツールでnormalize.cssとstyle.cssが読み込まれているか、確認しましょう。

1-4：今回のまとめ

テキストエディタの操作に慣れておこう

学習の際にはテキストエディタを使いこなす事が大事です。Dreamweaver、TeraPad、真魚、mi（Mac）など、なんでも良いのですが、初期文字コードはUTF-8Nにしておきましょう。また、普段から学習に使うテキストエディタをどんどん使って、操作に馴れておくのが良いです。自転車の運転と同じで、どうしても一定の練習時間が必要ですから、それは覚悟しておくように。

高性能な開発環境について

EclipseやAptana Studioなど、高性能な開発環境は、基礎が身に付いた人が効率を上げるために使うものです。html要素やcssプロパティがスラスラ書けるようになってから使うのをお勧めします。

便利なWebサービスについて

また、便利なWebサービスの中には「簡単なドラッグ＆ドロップ操作でWebサイトを構築できる」というものがありますが、これはhtmlやcssを勉強したくない人や、基礎が身に付いた人が仕事などのカンプ制作目的で使うツールです。学習中の人は無視しましょう。
例えば、カップ麺はおいしいくて便利ですが、料理が上手になりたいなら、カップ麺は排除すべきです。食材や味付けの知識や、調理道具の使い方を学ぶ機会を自ら逃してしまうだけです。

WordPressのページ上に雪を降らせるプラグイン

2件の返信

かおりんごさんが大好きそうなプラグインを見つけました。
http://smkn.xsrv.jp/blog/2010/12/wordpress-plugin-wp_snowdrops/
こういうWPオフィシャルではないモノって危険ですか？
zipを解凍したら「うわ～！！」みたいな。
時間があいたら、試しにやってみようと思ったんだけど、悩み中。

2013-5-24 勉強会

2件の返信

今日もランサーしょうじさんはお休みでした。寂しいなー・・・(ﾉ_･｡)
勉強会の概要

kanedaさんからの質問。リスティング広告とはなんですか？
りんごのサイトに入会申し込みフォームを作る。（会員を増やそうキャンペーンを開始!!）
かおりんごさんの提案「1からりんごのオリジナルテーマをつくろう」
真中のぶさんのリクエスト「パックマンをパクパクさせながら画面の右から左に移動させる」

続きを読む →

WP テキストの背景に写真を表示させる

6件の返信

貴如意さんサイトのトップページ。http://kiraku07.info/
あいさつ文の背景に朝日の写真が表示されています。
WPで、このように固定ページに写真の上にテキストを表示させるには、どうしたらよいのでしょうか？

通常のHTML,CSSの場合はcssのbackground-imgで指定すれば良いのですが、
貴如意さんサイトを見ると写真とテキストは、それぞれdivで囲まれています。

それと、写真はレスポンシブになっています。それには何か指定が必要でしょうか？

よろしくお願い致します。

2013-5-24 勉強会リクエスト

コメントをどうぞ

勉強会でやって欲しい事をリクエストします。

①動画挿入用プラグイン「Viper’s Video Quicktags」を先ほどインストールしました。
　簡単に出来て特に問題ないのですが、iphoneで見るとサムネイル画像が縦に伸びてしまっています。
　クリックして別画面が開き動画を見る際には問題ありません。

②先週のcssアニメを自分なりにアレンジしてやってみました。それについての質問です。
　こちらを見て下さい。
　http://nobu-69.com/study/css_packman/css-packman.html
パックマンがパクパクやっているのは上手く出来ました。
「パックマンをパクパクさせながら画面の右から左に移動させる」
という所で、つまずいています。

勉強会用にzipファイルも用意しました。
http://nobu-69.com/study/css_packman/css-packman.html

以上

よろしくお願い致しまするん。

②について勉強会でやりました。ありがとうございました！

.pack {
width:300px;/*幅の指定は大事です*/
animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/
}
@keyframes pack {
0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/
100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/
}

.pack {

width:300px;/*幅の指定は大事です*/

animation:pack infinite linear 10s;/*10sは10秒で下記のキーフレームアニメーションを行うという意味*/

}

@keyframes pack {

0% {transform:translate(130em,0);}/*キーフレーム0%の時パックは右画面の外・画面幅によって数値も違う！*/

100% {transform:translate(-30em,0);}/*キーフレーム100%の時パックは左画面の外・画面幅によって数値も違う！*/

}

こんな感じで実装できました。

WP　動画挿入用プラグイン「Viper’s Video Quicktags」

コメントをどうぞ

動画挿入用プラグイン「Viper’s Video Quicktags」を入れてみました。

「YouTube」というボタンを押せばダイアログボックスが出てきますので、画像のurlを入れて下さい。
サイズも変えられるよ！
[youtube]http://www.youtube.com/watch?v=DC6J1kUd-64[/youtube]

参考サイト
http://wp-site.biz/4618

TOPページのデザインを変更しました

コメントをどうぞ

front-page.phpを編集し「パソコン倶楽部りんご」TOPページのaside部分を最新の投稿5件に変更して、カテゴリー、タグ、投稿者を表示するようにし、コメントも最新の5件を表示させました。これに伴い、Front-page用のウィジェットエリアに入れていた、投稿とコメントのウィジェットは削除しました。
また、「おすすめ」というタグを作成しておいたので、りんごユーザーの人は、自分がお勧めしたい投稿に「おすすめ」タグをつけて下さい。数が揃ったら、上記のaside内などに表示してみます。

ワードプレスにソーシャルボタンプラグインSharebar（シェアバー）を設定する

2件の返信

本日は最近良く見かける、ページをスクロールしてもソーシャルボタンがそれに合わせてついて来てくれる、share barというプラグインを実装してみようと思います。
固定型と比べますと、ソーシャルメディアからのアクセス流入数が１０％改善された、という報告もあるそうですよ。

1.Sharebarをインストールする

2.Sharebarに「はてなブックマーク」ボタンを追加する

3.Sharebarのカスタマイズ

4.Sharebarとワードプレス関数 get_the_excerpt の干渉？によるバグの消し方　補足

1.Sharebarをインストールする

ダッシュボードからプラグイン＞新規追加で検索フォームにSharebarと入れて検索します。
最初の方に出てきますので、インストールし有効化します。
続きを読む →

記事の閲覧数を表示させるワードプレスプラグインPostViews

1件のフィードバック

このサイトのサイドバーに設置している人気記事ランキングは、WP-PostViewsというプラグインで表示しています。
このプラグインを設置する事でサイト内でどんな記事が人気があるのか、傾向を把握することが出来ます。

それでは早速、WP-PostViewsを設置してみましょう。

1.WP-PostViewsをインストールする

ダッシュボードからプラグイン＞新規追加で検索フォームにWP-PostViewsと入れて検索します。
一番上に出てくると思いますので、インストールし有効化します。
以上！
ダッシュボードの投稿＞投稿一覧へ行ってみると、右端に○○viewsと表示されていますよ♪

2.サイドバーに人気記事ランキングを表示させる

それではサイドバーに人気記事ランキングを表示させてみましょう。

ダッシュボードへ戻り、外観＞ウィジェットからViewsを選択し、サイドバーの表示させたい場所にドラッグします。
続きを読む →

アイキャッチがある単独ページではヘッダー画像を表示しない

コメントをどうぞ

WordPressで複数ヘッダー画像をcssスライドショーで動かすで設定したヘッダー画像ですが、投稿にアイキャッチを入れることにした為、アイキャッチがある場合は邪魔になってきました。
そこでheader.phpを編集し、アイキャッチがある単独ページの場合はヘッダー画像を表示しないようにしてみました。

<header id="masthead" class="site-header" role="banner">
		<hgroup>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
			<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
		</hgroup>

		<nav id="site-navigation" class="main-navigation" role="navigation">
			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
		</nav><!-- #site-navigation -->

		<?php
		/*****************************************************************************************
			front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
		<?php if( is_front_page() ):	/* front_pageならば */
			$images = get_uploaded_header_images();
			if($images):
			?>
			<div class="top_slides">
				<img src="http://clubringo.com/wp-content/uploads/2013/03/top-img-back.gif" alt="">
				<?php foreach($images as $image):?>
				<img src="<?php echo $image['url']?>" alt="">
				<?php endforeach;?>
			</div>
			<?php endif; /* front_pageここまで */ ?>
		<?php
		/*****************************************************************************************
			単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30
		*****************************************************************************************/ ?>
		<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>
		<?php
		/*****************************************************************************************
			ここまで
		*****************************************************************************************/ ?>
		<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>
			<?php
			$header_image = get_header_image();
			if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
			<?php else: ?>
			<!-- no header_image -->
			<?php endif; ?>
		<?php endif; ?>
		<?php
		/*****************************************************************************************
			ここまで by タカハシ 2013-3-24
		*****************************************************************************************/ ?>
	</header><!-- #masthead -->

<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>

</hgroup>

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

</nav>

<?php

/*****************************************************************************************

front_pageだけ、ヘッダー画像を取得してcssで回す by タカハシ 2013-3-24

*****************************************************************************************/ ?>

<?php if( is_front_page() ): /* front_pageならば */

$images = get_uploaded_header_images();

if($images):

<?php foreach($images as $image):?>

<?php endforeach;?>

</div>

<?php endif; /* front_pageここまで */ ?>

<?php

/*****************************************************************************************

単独のページでアイキャッチがあれば、ヘッダー画像は出さない by タカハシ 2013-4-30

*****************************************************************************************/ ?>

<?php elseif( is_singular() && has_post_thumbnail( $post->ID ) ) :?>

<?php

/*****************************************************************************************

ここまで

*****************************************************************************************/ ?>

<?php else : /* front_pageでなければ、Twenty Twelveの設定通り（固定かランダム） */ ?>

<?php

$header_image = get_header_image();

if ( ! empty( $header_image ) ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>

<?php else: ?>

<?php endif; ?>

<?php

/*****************************************************************************************

ここまで by タカハシ 2013-3-24

*****************************************************************************************/ ?>

</header>

2013-4-26勉強会

2件の返信

今日もお菓子、あります。感謝。
勉強会の概要は

gunosyに登録しよう。
CSS3 border transition effects
Sharebarとget_excerptの干渉を回避する
frontページで投稿アイキャッチ画像を使う

続きを読む →

Facebookとwordpressを連携させたいのですが…

5件の返信

パソコン倶楽部りんごのFacebookページで、アプリを追加したことのあるメンバーの方に質問です。

Facebookとwordpressを連携させるため、wordpress側にFacebookの公式プラグイン「Facebook for WordPress」を入れてみました。
ダッシュボードへ行くと、左サイドにFacebookのタブが出来ております。

ところで、ここでの設定をするにはまずFacebook側で「新しいアプリケーションを作成」しなければならない様なのですが、りんごのページにそれらしきボタンが見つかりません(-“-;

Facebook Developer（開発者）のページの右上にある「Apps」から追加出来るとの情報もありましたが、この「Apps」をクリックすると、りんごのページに戻ってしまいます。

ちなみに、Facebookのヘルプには、

Q. Facebookページにアプリを追加するにはどうすればよいですか？

A. Facebookページにアプリを追加するには、まず追加するアプリの情報ページに移動します。アプリをページに追加できる場合は、左下に「マイページへ追加」リンクが表示されます。

とありますが、このプラグインのページへ行ってみても「マイページへ追加」リンクなどはどこにも見当たりません。
（追加出来ない筈は無いと思うのですが。）

ご存知の方、ご回答宜しくお願いします。

月	火	水	木	金	土	日
« 8月
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30