WordPressのテーマを手作り
火曜日, 8月 16th, 2011 WordPressのテーマを手作りしてみました。と言っても、ど素人の私にまったくの自力で作れるはずはありません。「WordPress レッスンブック 3.x対応」という本を買い込んで、その通りに作っていきました。そうしたら出来るもんですね。最後にヘッダーや色をカスタマイズして出来上がりました。
その作ったテーマを使用しているブログがこちらです。
「古い本棚」
皆様も挑戦してみてはいかがですか。
WordPressのテーマを手作りしてみました。と言っても、ど素人の私にまったくの自力で作れるはずはありません。「WordPress レッスンブック 3.x対応」という本を買い込んで、その通りに作っていきました。そうしたら出来るもんですね。最後にヘッダーや色をカスタマイズして出来上がりました。
その作ったテーマを使用しているブログがこちらです。
「古い本棚」
皆様も挑戦してみてはいかがですか。
Facebookのウォール(投稿記事など)に自分のブログの記事を自動的に載せるアプリケーションです。全文を載せるアプリのあるようですが、それではうっとうしいので、抜粋を載せるアプリを選んで見ました。それが「My Blog Posts」です。
「My Blog Posts」を設定するための手順です。
まずはご自身のFacebookのホームを開いて下さい。左サイドバーに「アプリ」とありますのでそれをクリックしてください。下の図です。クリックすると大きな画像が出ます。

次にこんな画面が出ますので赤丸の「アプリディレクトリ」をクリックしてください。

次の画面です。左上の検索の所に「My Blog Posts」と入れて検索してください。

次の画面。「My Blog Posts」アプリが出ますので、赤丸の部分をクリックしてください。

こんな画面に変わりますので、「アプリへ移動」をクリックしてください。

次の画面。「許可する」をクリックしてください。

次の画面。これも「許可する」をクリックしてください。

次の画面です。矢印の所にFacebookに転記したいブログのURLを書きこんで下さい。

そうしたら、下にある「Connect this blog」をクリックしてください。

次にこんな画面が出ます。ここはスキップして下さい。

こんな画面が出たら設定の終了です。

これで、あなたが指定したブログが投稿されると、自動的に抜粋がFacebookのウォールに投稿されます。画像と先頭部分が載ります。
試してみて感じるのは、かなりタイムラグがありますので、あまり短気にならずに。
以上です。
例として、管理人のFacebookを見て下さい。サイドバーの「管理人のFacebook」です。友達リクエストも受け付けていますので、お気軽にクリックしてみて下さい。99%受け付けます。
Facebookのアカウントを取得するのは非常に簡単なので、特に画像は載せません。
まずこちら「http://www.facebook.com/」に行って下さい。
そしたら右に新規登録がありますので、必要な項目を記入して下さい。名前(ローマ字)やメールアドレスやパスワード(任意のローマ字)や性別や生年月日などです。Facebookは基本本名で登録です。
セキュリティーチェック用の変な文字が出ますので、それを入力して「新規登録」をクリックしてください。
次に進みますが、後はスキップというのがある場合はスキップして結構です。あとから変更で埋めていく事が出来ます。
アカウントの登録が終了すると、メールが来ます。その中に「下のURLをクリック」とあります。そのURLをクリックしてください。これをしないと本当の意味での登録が終了しません。
これで登録完了です。
「http://www.facebook.com/」画面の右上のメールアドレスとパスワードを入れてログインしてください。ここから始まります。
おおよそ2年もほったらかしでした。寒い。
最近Facebook(フェイスブック)を始めました。そこでFacebookの事などを載せ始めようかと考えています。
WordPressもかなりバージョンアップしていますので、そんな事も。
さて、上手く再開できるでしょうか?????
WordPressにはページのデザインを同じHP(ブログも)内で変更することができます。とりあえずこちらのホームページをご覧ください。私の別のホームページです。
<Cut Chips/カットチップス>
このトップページはとてもブログソフトで作ったものとは思えないでしょう。ヘッダーもサイドバーもありませんから。でも、これもWordPressで作ったものです。このトップページだけのためにページのテンプレートを作っているのです。
ページのといいましたが、ブログの一般投稿の部分は一種類のテンプレートしか使えません。WordPress独特のページ機能の部分を新たなテンプレートで変えられるということです。ですから、ブログの一般投稿を使わすにページ機能だけでホームページを作る事も出来、そのページのデザインをさまざまに変えることができるということです。
では新しいページのテンプレートの作り方を紹介します。
まずは元になる雛型を用意します。たとえばどのテーマ(WordPressのデザインを決めるもので、世界中に無料のテーマが存在します)の中に『メインインデックスのテンプレート』や『ページのテンプレート』があるはずですので、それらを雛型としましょう。
雛型が決まったら、それをテキストエディタ(『TeraPad』など)で開いてください。
たとえばこんな風です。

先頭の赤線の行に注目してください。ここを少し細工します。
<?php
/*
Template Name: toppage
*/
get_header(); ?>
このように中に
/*
Template Name: toppage
*/
というのを入れます。この『toppage』というのがこのテンプレートの名前になりますので、適当な名前を入れてください。自由に決めて結構です。これはページを書く時に右に属性の中のテンプレートとして表示され、選択出来る名前になります。この説明は後で出てきます。
実際には下の画像のようです。

ここで、ページのデザインを変更するのですが、とりあえずこれを格納しましょう。変更を加えたら上書き保存すればいいのですから。雛型としたテンプレートと同じ場所に『aaaaaa.php』として格納しますが、aaaaaaaの部分はテンプレートの名前と同じにした方が後でわかりやすいでしょう。
これで用意はできましたので、さっそく使ってみましょう。もちろん使うWordPressの中のテーマに新たに格納したテーマを送り込んでくださいね。
ページの新規追加を開いてください。そしたら右の方にある属性に注目してください。下の画像です。

デフォルトだけではなく、作ったテンプレート名も入っているはずです。この新しく作ったテンプレートを選択して、ページを書くと、そのデザインでそのページが表示されるということです。
以上が新たなページのテンプレートの作り方と使用方法です。
Google SketchUp(スケッチアップ)とはGoogleが提供しているサービスの一つです。3次元の物を作り出し、あらゆる角度から見ることが出来ます。もちろん無料です。(有料版もありますが)
SketchUp(スケッチアップ)は元々建築家のためのソフトでした。ですから建築物を作り出すのは得意ですが、その他にも用途は沢山あります。例えば車、飛行機などの乗り物。アニメに出てくるロボット。身近な家具や文房具など沢山のものが生み出されています。
SketchUp(スケッチアップ)を身近に体感したいと思われるのでしたら、GoogleEarthを起動して、東京タワーを見て下さい。その際3D表示を出せるようにチェックを入れておいて下さい。この東京タワーもSketchUpで作ったものを、GoogleEarthに載せているのです。他にも沢山の建築物がSketchUpで作られ、GoogleEarthに載せられています。色々探してみてください。
ということは、自分で作った実際の建築物をGoogleEarthに載せることも可能?そうなのです。最終的にはそこまで出来るのです。
そんなSketchUp(スケッチアップ)を最近始めましたので、使い方や注意点、テクニックなどを自分のメモ代わりにここに載せていきたいと考えています。私もまだ初心者ということです。
まずはSketchUp(スケッチアップ)のソフトをダウンロードしてこなければ。
Googleの検索ページから入ることが出来ます。Googleの検索ページは
http://www.google.co.jp/ です。
下の画像を見てください。赤丸のどちらかをクリックしてください。

次の画面が下です。赤丸のSketchUpをクリックしてください。

SketchUpのページに飛びます。下の赤丸をクリックしてください。

次に赤丸の無料版の方をクリックしてっください。

赤丸の次へをクリック。

ダウンロードが始まり、終了するとデスクトップにこのようなアイコンがついたはずです。今度はこれをクリックしてください。インストールウイザードが作動します。

こんな画面が出てきますので赤丸の実行をクリック。

次はこんな画面。赤丸の次へをクリック。

次はこんな画面。まずAにチェックを入れ、Bをクリックします。

インストール先の選択を聞いてきますので指定してください。大体はそのままでいいでしょう。

インストール準備完了の画面。赤丸のインストールをクリックしてください。

インストールが終わるとこんな画面です。赤丸の完了をクリックしてください。

デスクトップにこんなアイコンが現れたはずです。これがSketchUp(スケッチアップ)のアイコンです。

早速SketchUp(スケッチアップ)を動かしてみましょう。アイコンをクリックしてください。
こんな画面が出てきたはずです。一番手前の画面の赤丸のXをクリックして消してください。

ちょっと、横道。上の画面の下の方に単位という場所があります。下の画面です。ここで単位をインチからメートルに変えればいいはずなのですが、残念ながらバグがあって変えられません。ですから、単位は後で変えることにして、この手前の画面は消してください。

次にもうひとつこんな小さめの画面が出てきます。学習センターのヒントです。この画面は設定を変更しない限り、SketchUpを立ち上げるたびに出てきます。ここは結構勉強になりますのでしばらくは変更せずにそのままにしておいた方がいいと思います。とりあえずXをクリックして消してください。

いよいよ、自作できる画面が下の画面です。しかし、このままでは単位がインチのままです。インチが単位の時はこのようにL字スケールが表示されます。

単位をメートルに変えましょう。ツールバーの「ウインドウ」の中の「環境設定」をクリックしてください。下の画面です。

左にあるテンプレートをクリックし、次にインチとありますのでここを変えます。

下の画面のように「メートルメートル」を見つけてそれをクリックしてください。そして「OK」をクリックすると、単位がメートルに変わります。

下のような一人の男性が出てきたら単位がメートルに変わった証拠です。

インストールと初期の設定はこれで終わりです。
今日はここまでにします。実践メモは次回から。
一つ前の投稿でWordPressプラグイン「runPHP」の紹介をしましたので、ここでは実際に「runPHP」を使ってみたいと思います。トップページを固定して、その本体の中に「最近の投稿」を組み込んでみます。
参考までに「最近の投稿10件」を入れたページを見てください。
「森の父さん花鳥風穴」 http://www.tousan13.com/
このようなものを作ります。ちなみにこの「森の父さん花鳥風穴」は管理人の別のホームページです。
まずはそのページの「runPHP」を有効にしてください。これは前のWordPressプラグイン「runPHP」を参考にしてください。
「最近の投稿」のWPテンプレートタグは”wp_get_archives”です。その書式は
< ?php wp_get_archives('type=postbypost&limit=10'); ?>
です。limitはいくつの投稿まで遡るかです。この場合は=10ですので10件。もちろん自由に変えられます。
< ?php wp_get_archives('type=postbypost&limit=10'); ?>は指定がない限り普通<li>の箇条書きで表示されますので、<ul>でそれを宣言しなければいけません。前後に<ul>と</ul>を付けて下さい。これだけです。
例えばこのように。
<strong>最近の投稿10件</strong>
<ul>
< ?php wp_get_archives('type=postbypost&limit=10'); ?>
</ul>
この部分をコピーして使っていただければそれでも結構です。後はCSSで格好を着けてください。
WordPressはそのままでは、「投稿」記事や「ページ」記事の記事内ではPHPが使えません。記事内でPHPを使いたい場合はプラグインが必要です。
プラグインの説明の前に何故本体でPHPを使う必要があるの?と質問されそうですが、たとえば「最近の投稿10」なんて言うのをサイドバーではなくトップページの一部に置きたいなんていう事が出てくるかもしれません。その時にはPHPが必要になってきます。
では本題です。記事本体でPHPを使うためのプラグインは「runPHP」といいます。
こちらから入手できます。
>> no sq <<
そこの画面がこれです。

少し下にスクロールしていただくと、「Download」というところにzip形式に圧縮されたものがあります。下の画面です。

赤丸の部分です。そこをクリックして、任意の場所(デスクトップが便利でしょう)に保存してください。
圧縮されているので、「+Lhaca」などを使って解凍してください。
解凍した最初のフォルダをクリックすると中にもう一度「runPHP」のフォルダがあります。ちょっとそれを開いてみてください。
下のようなファイル群が並んでいるはずです。

このファイル群が入っていたフォルダを「FFFTP」などのFTPクライアントを使って、お使いのWordPress→wp-content→pluginsの中に送って下さい。
そうしましたら、そのWEBの管理画面にログインしていただき。「プラグイン」のところで「runPHP」の「使用する」をクリックして有効にしてください。
これで準備はOKです。管理画面内の「設定」を開いていただくと「runPHP」という項目ができていると思います。下の画面です。

もうひとつやることがあります。
ためしに投稿でもページでもいいですから開いていただいて、新規投稿でもかまいません。一番下までスクロールしてみてください。下の画面のようにチェックを入れるところがあるはずです。

PHPを使いたい記事のこの部分にチェックを入れてください。
「runPHP」を有効にしたからといって、すべての記事でPHPが使えるようになるわけではないのです。ここにチェックを入れた投稿・ページの記事でだけPHPが使えるのです。
はじめの方でちょっと説明に使ったPHPを使って「最近の投稿10」を入れる方法については別の稿で紹介するつもりです。
普通、ブログは時系列に並んでいて、最後に投稿したページがトップページの一番上にくるものです。しかし、WordPressにはページという概念もあり、そのページをトップページにすることができます。普通のホームページのようにトップページを固定できるということです。
また、投稿記事で書かずに、このページを多用することによって、普通のホームページのような作りにすることができます。WordPressがただのブログソフトではな<CMS>と呼ばれるゆえんです。
ページを一つ作り、それを固定のトップページにしてみましょう。
まずページの新規投稿でトップページ風のページを書いてください。そしてそれを公開してください。次に下のスクリーンショットを参考にダッシュボードの下、一番下の「設定」を開いて中の「表示設定」をクリックしてください。

こんな表示設定ページが出てきたはずです。

赤丸Aのラジオボタンにマークを入れ、赤丸Bを先ほど公開したトップページに設定してください。これでトップページは固定されました。
私の別のホームページですが、トップページを固定した例です。
<フリー素材無料写真 森の父さん花鳥風穴>
WordPressのサイドバーをカスタマイズするのに一番手っ取り早いのはウェジェットを使うことです。今のWordPressにはこのウェジェット機能が備わっていますので、サイドバーのメニューを手動で取り捨て、変更をする必要がなくなりました。必要なメニューを必要な場所に簡単に載せることができます。
例えば左右にサイドバーのあるテンプレートを使っているとして、左にカテゴリー・ページ、右にサイト内検索、最新の投稿を載せたいとすると、いとも簡単に出来るのです。あまりに簡単なので、いちいちスクリーンショットは載せません。
ダッシュボードの左にある外観>ウェジェットをクリックしてください。そこにサイドバーのメニューがありますので、入れるだけです。
ウェジェットは規定のものだけではなく、いろんなサイトで新たなウェジェットが公開されていますので、それを取り込むことも出来ます。
テキストというメニューには自分で必要と思われるものを入れることが出来ます。例えばGoogleアドセンスをそこに入れる、また無料のブログパーツを見つけてきて入れる、などに使えます。
このブログの右のサイドバーももちろんウェジェットを使用しています。
初心者には本当に強い見方のウェジェット機能。WordPressを導入したらまず初めにいじる所ではないでしょうか。おじさんにも簡単。