DokuWikiとGoogle系サービスを連携する方法
Google Search Consoleにサイトマップを登録
詳細は、Gogle Search Consoleの
- Google Search Consoleにサイトを登録する方法
- Google Search Consoleにサイトマップを登録する方法
を参照。
サイトマップには以下の2つを登録する
sitemap.xml.gz
feed.php
DokuWikiにGoogle Analyticsを導入する方法
- Google Analyticsで、
測定ID
を発行する。 <head>
タグ用コードを、DokuWiki組み込みフックのmeta.html
に貼り付け。<body>
タグ用コードを、DokuWiki組み込みフックのheader.html
に貼り付け。
DokuWikiにGoogle AdSenseを導入する方法
Google AdSenseでの作業
DokuWikiでの作業
組み込みフックで、
meta.html
header.html
footer.html
sidebar.sticky.html
に広告コードを貼り付ける。
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以下のデバイス)ではサイドバーが表示されなくなる。