4,002 Views

wordpressテーマの登録 初心者の挑戦!バイラルメディア風のシェアボタンをくっつけられるまで!

スポンサーリンク

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

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

 

スクリーンショット 2014-09-11 16.33.57

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でアップロード。

 

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

次!  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

続いて、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
<!--OGPここから-->
<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";
}
?>
<!--OGPここまで-->

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

ボクのfacebookのヘッダーは、

https://www.facebook.com/photo.php?fbid=10150626804036114&set=a.429567651113.230542.730236113&type=1&theater

だったので、

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.knn.com @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を再度見なおしました。

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

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

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

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

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

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

<?php get_header(); ?>

<section class=”content”>

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

<div class=”pad group”>

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

<h1 class=”post-title”><?php the_title(); ?></h1>
<p class=”post-byline”><?php _e(‘by’,’hueman’); ?> <?php the_author_posts_link(); ?> &middot; <?php the_time(get_option(‘date_format’)); ?></p>

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

<div class=”clear”></div>

<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 –>

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
<!– 4knn336 –>
<ins class=”adsbygoogle”
style=”display:inline-block;width:336px;height:280px”
data-ad-client=”ca-pub-4945609109429902″
data-ad-slot=”5810350672″></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

<p><p> <p><p>

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

<div class=”clear”></div>

<?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(); ?>

スポンサーリンク