wordpressテーマの登録初心者の挑戦！

WordPressのテーマを見つけて登録インストールする方法メモ

hueman は、https://wordpress.org/themes/hueman

rui live noteさんの「WordPressで初めてのバイラルメディアサイトを一時間で作る方法」で紹介されていた。ありがとうございます！

好きなテーマを見つけて、ダウンロードして解凍します

FTPクライアントを起動し、wp > wp-content > themesフォルダに登録

MacのCyberduckというFTPソフトをボクは使っています。
サーバーは、Xsrv.jpさん　Xserverさん。

なので…

フォルダは、
4knn.tv > public.html > wp-content >　themes > hueman

こちらに hueman というテーマをインストール。

現在の4knn.tv がかなりシンプルになると思う。

そして、紹介されているカスタマイズを施す！20分でできるかな？

テーマのカスタマイズ（20分）

子テーマを作る
ヘッダーに OGP 設定を追加する
投稿ページに SNS ボタンを追加する

hueman-child　という子テーマを作る

wp-content/themes/hueman_child というディレクトリを作成して、その中に style.css というファイルを作ります。

style.css の中身はまず最低限でこんな感じ。

1

2

3

4

5

6

7

@charset "utf-8";

/*

* Theme Name: hueman-child

* Template: hueman

* */

@import url('../hueman/style.css');

「Theme Name」には子テーマ名、「Template」には親テーマ名を指定してください。

style.css が作られると WordPress のテーマ画面から子テーマ hueman-child が選択できるようになりますので、そのテーマを有効化しておきます。

できるかなぁ…。ここまででブログ書きながらで15分経過（笑）

フォルダは作れた！　ファイルのSyle.cssが作れなかったのでローカルで、マックのmiというエディターで、おまじないのような文章をコピペして、Style.cssで保存して、Cyberduckでアップロード。

おや、ファイル名にスペースはいってしまって、２つになってしまった。削除しようとしても削除ができない。名前も変わらないけど、ま、いいや…！

次！　　35分経過！

WordPressのテーマに！　hueman-child できてた！

有効化！

おおお！見た目かわった！　だけど、写真はどこへ？

何やら、プラグインに、どーたらこーたら　というのが来てるわ！

とりあえず、言われるがままにインストール！

The following recommended plugins are currently inactive: Contact Form 7, Regenerate Thumbnails and WP-PageNavi.
Activate installed plugins | Dismiss this notice

プラグインをインストールして、からアクティベートActivateを忘れないように！

えい！

何もかわらんなぁ…。

…と思ったら、こんな深い　左メニューの【ツール】に【Regenarate Thumbnails】が、これかな？

今のところ、変化なし…。

【追記】サムネイル画層は、「アイキャッチ画像」を登録するというところで設定すれば表示されるようになりました。ただ、昔のブログエントリに使っているembed写真をそのままサムネイル化する方法がわかりませんね。このあたりPHPでプログラムを書いたりできないんだろうか？
ある一定の法則性にもとづいて、掲載されている写真なので、表示できるといいなぁ…。

ま、気にしないで、次のOGPというものを設定したいと思う。

「OGP」というのは Open Graph protocol の略称で、簡単に言うと Facebook 等の SNS でシェアされた時にそのページの情報を正しく伝えるための仕組みです。

…だそうだ。

そして、ここからが大変そう（泣）

不思議な呪文とおまじないがつづきます…。ひとつずつじっくりいくぞ！　ここまでですでに、1時間45分経過（笑）

OGP を設定するにあたり、事前に下記の手順で Facebook の「fb:admins」の値を取得しておきます。

Facebook で自分の個人アカウントページを開く

自分のプロフィール写真をクリック

写真が表示されたページのURLを確認し、最後の方にある「.xxxxxxxxxxxxxxx＆type=1＆」の「xxxxxxxxxxxxxxx」部分の数字を覚えておく（「.」と「＆type=1＆」の間の部分です）

次に、親テーマのディレクトリにある header.php を小テーマのディレクトリにコピーします。

1

2

3

wp-content/themes/hueman/header.php

　　↓

wp-content/themes/hueman_child/header.php

そして、header.php の head タグを変更します。

1

<head>

とある部分を、次のように。

1

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

続いて、header.php の </head>タグの直前に下記コードを追記します。

※ <?php wp_head(); ?>の後ろに、ペーストでいいのかな？

【】の部分はサイトに合わせて変更してください。

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

31



<meta property='og:locale' content='ja_JP'>

<meta property="fb:app_id" content="【事前に取得した「fb:admins」の値】" />

<?php if ( is_single() ) { //投稿記事 ?>

<meta property='og:type' content='article'>

    <meta property='og:title' content='<?php the_title() ?>'>

    <meta property='og:url' content='<?php the_permalink() ?>'>

    <meta property='og:description' content='<?php echo mb_substr(get_the_excerpt(), 0, 100) ?>'>

<?php } else { //ホーム・カテゴリー・固定ページなど ?>

<meta property='og:type' content='website'>

    <meta property='og:title' content='<?php bloginfo('name') ?>'>

    <meta property='og:url' content='<?php bloginfo('url') ?>'>

    <meta property='og:description' content='<?php bloginfo('description') ?>'>

<?php } ?>

<meta property='og:site_name' content='<?php bloginfo('name'); ?>'>

<?php

if ( is_single() or is_page() ) { //投稿記事か固定ページ

    if ( has_post_thumbnail() ) { //アイキャッチ画像がある場合

        $image_id = get_post_thumbnail_id();

        $image = wp_get_attachment_image_src($image_id, 'full');

        echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";

    } elseif ( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) && !is_archive() ) { //アイキャッチ以外の画像がある場合

        echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";

    } else { //画像が1つも無い場合

        echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";

    }

} else { //ホーム・カテゴリーページなど

    echo '<meta property="og:image" content="【デフォルト画像のURL】">';echo "\n";

}

?>



設定が終わったら、Facebook の Debugger ページで、サイトURL を入れて OGP が正しく動作するか確認してみましょう。Debugger でエラーが出なければ OK です。

Debugger | Facebook

ボクのfacebookのヘッダーは、

だったので、

730236113　かな？

親ファイルheader.phpをコピーして、おまじないとfacebookのidを入れて、子ファイルの、hueman-childへコピーした。そして、コピーした　header.phpに上記のおまじないを記述完了。

さて、これからどうするんだ？

facebookのデバッガーページでチェック！

https://developers.facebook.com/tools/debug/

https://developers.facebook.com/tools/debug/og/object?q=4knn.tv

エラーが出ていないということは問題無いということなのかな？
本当にプログラマーとか開発者のツールって、親切心のかけらもないぞ（笑）

さて、次は…　ここまでで、2時間30分経過…。ふぅ〜。

twitter Cards という申請方法はこちら…。

twitter cardsの申請方法「概要を表示」に表示させる方法
https://4knn.tv/twitter-cards/

twitter Cards validator
https://cards-dev.twitter.com/validator
<!–Twtter Cards–>
<meta name=”twitter:card” content=”summary”>
<meta name=”twitter:site” content=”@knnkanda”>
<meta name=”twitter:creator” content=”www.4knn.tv @knnkanda”>
<meta name=”twitter:domain” content=”https://4knn.tv/” />

Style.cssにSNSボタンのテンプレートを作るのか！
だんだん理解ができてきた！

さて、いよいよ、これからが、バイラルメディア風のシェアボタンだ！

/*———————————
SNSボタン用
——————————–*/
.snsshare2 {
width: 100%;
height: 60px;
margin-top: 30px;
margin-bottom: 10px;
}

以下省略！〜

single.phpにも記載したところ、おお！！！

facebookとtwitterボタンが設置できている！

理由はよくわからないが、設置出来ていることが重要だ！（笑）

ここまで3時間かかりましたが、ブログにメモしながら、人様の3倍の時間なら、初心者プログラマーとしては上出来ということにしておきましょう！

テキストファイルだけど、.phpファイルと.cssファイルをコピペながらもコードを書いた気分（笑）！

しかし！　エントリーが重複ループしている！

なんかエントリーが重複しているけれども、サイトにバイラルメディア風のシェアボタンをつけてみた。
おそらく、single.php　ファイルもしくは、header.php　style.cssあたりが怪しいんだろうなぁ…。

【解決！】

single.phpのところに、コードをたった2行足せばよかっただけなのにすべてを足してしまったからだった。

それと、twitterで送信した時に、他の方のアカウントが掲載されてしまうのは、
sns.php の後半のここの設定で治った。

text=<?php the_title(); ?>&via=knnkanda” target=”blank”>Twitterでシェア</a>
</div>

しかし、またバイラル風のシェアボタンが消えてしまっているぞ…謎

【追記】2014年9月13日土曜日15時41分

single.phpを再度見なおしました。

肝心な２行追加したsingle.phpではなく古いファイルに、Adsenseコードを貼った時に、肝心な２行が漏れていました。！！

<?php get_template_part(‘sns’);?>

この一行が、sns.phpを読み込んでくれていたんですね！　それを２行挟むことによって、コラムの上下にバイラルメディア風シェアボタンが完成！

Ko Takagi ‏@ko31 さん、重ね重ね、ありがとうございます！

@knnkanda ブログの説明ではシェアボタン部分をsns.phpに記述していたので、それのinclude漏れとかでしょうか？

— Ko Takagi (@ko31) 2014, 9月 12

FTPを意識することなく、ブログをやってきましたが、wordpressでカスタマイズにするには、FTPで、きちんと上書きしてくれるかの確認重要でした。

cyberduck なぜか、途中でつながらなくなるクセなんとかならんのだろうか（笑）上書きしたつもりでいたら、とんでもないことになっている。

<?php get_header(); ?>

<?php get_template_part(‘inc/page-title’); ?>

<?php while ( have_posts() ): the_post(); ?>
<article <?php post_class(); ?>>
<div class=”post-inner group”>

<?php if( get_post_format() ) { get_template_part(‘inc/post-formats’); } ?>

<div class=”entry”>
<?php get_template_part(‘sns’);?>
<div class=”entry-inner”>
<?php the_content(); ?>
<?php wp_link_pages(array(‘before’=>'<div class=”post-pages”>’.__(‘Pages:’,’hueman’),’after’=>'</div>’)); ?>
</div>
<?php get_template_part(‘sns’);?>
<div class=”clear”></div>

スポンサーリンク
<!– 4knn.tv google Adsense –>

</div><!–/.entry–>
</div><!–/.post-inner–>
</article><!–/.post–>
<?php endwhile; ?>

<?php the_tags(‘<p class=”post-tags”><span>’.__(‘Tags:’,’hueman’).'</span> ‘,”,'</p>’); ?>

<?php if ( ( ot_get_option( ‘author-bio’ ) != ‘off’ ) && get_the_author_meta( ‘description’ ) ): ?>
<div class=”author-bio”>
<div class=”bio-avatar”><?php echo get_avatar(get_the_author_meta(‘user_email’),’128′); ?></div>
<p class=”bio-name”><?php the_author_meta(‘display_name’); ?></p>
<p class=”bio-desc”><?php the_author_meta(‘description’); ?></p>
<div class=”clear”></div>
</div>
<?php endif; ?>

<?php if ( ot_get_option( ‘post-nav’ ) == ‘content’) { get_template_part(‘inc/post-nav’); } ?>

<?php if ( ot_get_option( ‘related-posts’ ) != ‘1’ ) { get_template_part(‘inc/related-posts’); } ?>

<?php comments_template(‘/comments.php’,true); ?>

</div><!–/.pad–>

</section><!–/.content–>

<?php get_sidebar(); ?>

<?php get_footer(); ?>