WordPressのテーマ(islemag_child)でFacebookのいいね＆シェアボタンを設置した時の内容を記載したいと思います。
バージョンなどでソースの内容は異なると思います。
環境
| OS/ミドルウェア | バージョン |
|---|---|
| CentOS | 7.2.1511 |
| Apache | 2.4.6 |
| PHP | 7.0.28 |
| MySQL | 5.7.21 |
| WordPress | 4.7.10 |
公式サイトからコードを取得
まずは公式サイトに移動します。コチラ → いいね！ボタン(ウェブ用)
ページに移動したらスクロールし、[コードを取得]をクリック。
Step 2のHTMLタグをコピー
ワードプレスの設定管理画面の「外観」→「テーマ編集」→「IsleMag_Child」→「header.php」を開き
bodyタグの下にペーストします
[ファイルの中身]
|
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 32 33 34 35 36 37 38 39 40 |
<?php /** * The header for our theme. * * This is the template that displays all of the <head> section and everything up until <div id="content"> * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package islemag */ ?><!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <!-- ▼facebook▼ --> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v2.12&appId=214191382324148&autoLogAppEvents=1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <!-- ▲facebook▲ --> <?php $wrapper_class = apply_filters( 'islemag_wrapper_class', array( 'boxed' ) ); ?> <div id="wrapper" <?php if ( ! empty( $wrapper_class ) ) { echo 'class="' . implode( ' ', $wrapper_class ) . '"';}?>> ︙ |
次にステップ3 HTMLタグをコピー
ワードプレスの設定管理画面の「外観」→「テーマ編集」→「IsleMag_Child」→「single.php」を開きペーストします
コピー元を一部変更
|
1 2 3 |
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> ↓ <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> |
[ファイルの中身]
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<?php /** * The template for displaying all single posts. * * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post * * @package islemag */ get_header(); ?> <!-- admax --> <script src="//adm.shinobi.jp/s/b9c5f546332b4e6c518881769ccbd8c4"></script> <!-- admax --> <!-- admax --> <script src="//adm.shinobi.jp/s/567e9586109916a91511fba7d677749e"></script><br /><br /> <!-- admax --> <div id="primary" class="content-area"> <?php $archive_content_classes = apply_filters( 'islemag_archive_content_classes',array( 'islemag-content-left', 'col-md-9' ) ); ?> <div <?php if ( ! empty( $archive_content_classes ) ) { echo 'class="' . implode( ' ', $archive_content_classes ) . '"'; } ?>> <main id="main" class="site-main" role="main"> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'template-parts/content', 'single' ); ?> <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : //comments_template(); endif; ?> <!-- ▼facebookいいね＆シェア▼ --> <div class="fb-like" data-href="<?php the_permalink(); ?>" data-layout="standard" data-action="like" data-size="small" data-show-faces="true" data-share="true"></div> <!-- ▲facebookいいね＆シェア▲ --> <?php endwhile; // End of the loop. ?> </main><!-- #main --> </div><!-- #primary --> </div><!-- #primary --> <?php get_sidebar(); ?> <?php get_footer(); ?> |
これで完了です
