DokuWikiとGoogle系サービスを連携する方法

Google Search Consoleにサイトマップを登録

詳細は、Gogle Search Consoleの

  • Google Search Consoleにサイトを登録する方法
  • Google Search Consoleにサイトマップを登録する方法

を参照。

サイトマップには以下の2つを登録する

  • sitemap.xml.gz
  • feed.php

DokuWikiにGoogle Analyticsを導入する方法

  1. Google Analyticsで、測定IDを発行する。
  2. Google Tag Managerで、<head>タグ用・<body>タグ用のコードを発行する。
  3. <head>タグ用コードを、DokuWiki組み込みフックのmeta.htmlに貼り付け。
  4. <body>タグ用コードを、DokuWiki組み込みフックのheader.htmlに貼り付け。

DokuWikiの組込フック(Include Hooks)を設定する方法

DokuWikiにGoogle AdSenseを導入する方法

Google AdSenseでの作業

Google AdSenseで、

  • 自動広告用のコード
  • ディスプレイ広告のコード
  • 関連コンテンツのコード

を取得する。

DokuWikiでの作業

組み込みフックで、

  • meta.html
  • header.html
  • footer.html
  • sidebar.sticky.html

に広告コードを貼り付ける。

DokuWikiの組込フック(Include Hooks)を設定する方法

meta.html

meta.htmlに、自動広告用のコードを貼り付ける。 

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

header.html

header.htmlに、ディスプレイ広告のコードを貼り付ける。 

<center>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
</center>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google AdSenseで発行されるコードから、
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
の部分は削除する。
（meta.htmlに貼り付けたコードと重複するため）

見栄えをよくするため、<ins></ins>の前後に、<center>タグを追加。

sidebar.sticky.html

sidebar.sticky.htmlに、ディスプレイ広告のコードを貼り付ける。

sidebar.sticky.html
<div class='sidebar-sticky'>
<center>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
</center>
</div>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

header.htmlに貼り付けたコードとまったく同じもの。

まったく同じコードでも、
header.htmlに貼り付けた方は横長のバナー広告、
sidebar.sticky.htmlに貼り付けた方には縦長のバナー広告、
のようにレスポンシブに（エリアのサイズに合わせて）広告が表示される。

footer.html

footer.htmlに、関連コンテンツのコードを貼り付ける。 

<center>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="9876543210"></ins>
</center>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Google AdSenseで発行されるコードから、
<script async src=“https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
の部分は削除。

<ins></ins>の前後に、<center>タグを追加。

サイドバーを追加

DokuWikiでsidebarというページを作成する。

DokuWikiのサイドバーにスクロール追従ウィジェットを追加する方法

サイドバーに設置した目次や広告などの要素を、ページスクロールに追従して表示させる。

独自の組み込みフック用HTMLファイルを作成する

DokuWikiのドキュメントルートを/home/user1/Dokuwiki/xxxと仮定する。 

cd /home/user1/Dokuwiki/xxx
vi conf/sidebar.sticky.html

sidebar.sticky.htmlというファイルを新規作成。

sidebar.sticky.html
<div class='sidebar-sticky'>
<center>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
</center>
</div>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

sidebar.sticky.htmlに、上記のようなHTMLを記入。
（Google AdSenseの広告をスクロール追従要素にしている）

<div class="sidebar-sticky"></div>
の間に書いた要素がスクロール追従ウィジェットになる。

独自の組み込みフックをインクルードする

confディレクトリに、meta.htmlやheader.htmlなどのファイルを作成すると、自動的にインクルードされてページに表示される。

sidebar.sticky.htmlなどの独自のファイルの場合には、.phpファイルに自分でインクルードの設定を書く必要がある。 

cd /home/user1/Dokuwiki/xxx
vi lib/tpl/bootstrap3/tpl/sidebar.php

DokuWikiのテンプレートにbootstrap3テンプレートを使っている。

lib/tpl/bootstrap3/tpl/sidebar.phpという既存のファイルを開く。

sidebar.php
<?php
global $TPL;
global $ACT;

$sidebar_title = $lang['sidebar'];

if ($TPL->getConf('sidebarShowPageTitle')) {
    $sidebar_title = p_get_first_heading(page_findnearest($sidebar_page, $TPL->getConf('useACL')));
    if (! $sidebar_title) $sidebar_title = $lang['sidebar'];
}

?>
<!-- sidebar -->
<aside id="<?php echo $sidebar_id ?>" class="dw__sidebar <?php echo $sidebar_class ?> hidden-print">
    <div class="dw-sidebar-content">
        <div class="dw-sidebar-title hidden-lg hidden-md hidden-sm" data-toggle="collapse" data-target="#<?php echo $sidebar_id ?> .dw-sidebar-body">
            <?php echo iconify('mdi:view-list'); ?> <?php echo $sidebar_title ?>
        </div>
        <div class="dw-sidebar-body collapse in small">
            <?php

                tpl_includeFile("$sidebar_header.html");
                if ($ACT == 'show') $TPL->includePage($sidebar_header);

                $TPL->normalizeSidebar(tpl_include_page($sidebar_page, 0, 1, $TPL->getConf('useACL'))); /* includes the nearest sidebar page */

                tpl_includeFile("$sidebar_footer.html");
                if ($ACT == 'show') $TPL->includePage($sidebar_footer)

            ?>
        </div>
    </div>

<!-- 以下、スクロール追従 -->
<?php tpl_includeFile("sidebar.sticky.html"); ?>
<!-- 以上、スクロール追従 -->

</aside>
<!-- /sidebar -->

既存のsidebar.phpで、</aside>の直前に
<?php tpl_includeFile(“sidebar.sticky.html”); ?>
を追加。

これで、sidebar.sticky.htmlの内容がサイドバーの末尾に表示されるようになる。

まだ、表示されるだけでスクロール追従はしない。
スクロール追従させるにはCSSの設定が必要。

sidebar.phpへ行った編集は、DokuWiki本体やBootstrap3 Templateのアップデートでリセットされる可能性がある。

CSSを設定する

cd /home/user1/Dokuwiki/xxx
vi conf/userall.css

userall.cssを開く。

userall.css
main > div.row {
    display: flex;
}
 
.sidebar-sticky {
    position: sticky;
    top: 50px;
}

userall.cssに上記の設定を追加。

main > div.row（サイドバーの親要素）にdisplay: flex;を設定。
これにより、サイドバーのheightがメインエリアのheightと同じになる。

.sidebar-sticky（スクロール追従要素のdivに設定したクラス名）にposition: sticky;を設定。

これにより、sidebar.sticky.htmlの内容がスクロールに追従して常時画面に表示されるようになる。

スマホでサイドバーを非表示にする

サイドバーの親要素にdisplay: flex;を設定した副作用で、スマホでもサイドバーが表示されてしまう。

スマホでサイドバーが非表示となるように設定する。

管理　＞　サイト設定

テンプレート
Bootstrap3
サイドバー
tpl»bootstrap3»leftSidebarGrid
左サイドバーの grid クラス col-{xs,sm,md,lg}-x
(Bootstrap3 日本語リファレンス グリッド・システムを参照) 		hidden-xs col-sm-3 col-md-2

デフォルト値は、col-sm-3 col-md-2。

hidden-xsを追加することで、スマホ表示（幅767px以下のデバイス）ではサイドバーが表示されなくなる。

  • 最終更新: 2021/08/07 08:04