"미디어위키에서 구글 애드센스 연동하기"의 두 판 사이의 차이

GameDic
이동: 둘러보기, 검색
(머리글)
(사이드 바)
 
(같은 사용자의 중간 판 9개는 보이지 않습니다)
7번째 줄: 7번째 줄:
  
 
아래의 예는 각 페이지의 머리글, 바닥글 및 사이드 바에 광고를 삽입하는 방법을 보여줍니다. 구글 애드 센스 광고 서비스 코드를 사용했지만, 그것은 쉽게 다른 광고 네트워크의 광고 서비스 코드에 의해 대체 될 수 있습니다.
 
아래의 예는 각 페이지의 머리글, 바닥글 및 사이드 바에 광고를 삽입하는 방법을 보여줍니다. 구글 애드 센스 광고 서비스 코드를 사용했지만, 그것은 쉽게 다른 광고 네트워크의 광고 서비스 코드에 의해 대체 될 수 있습니다.
 +
 +
  
 
= 머리글 =
 
= 머리글 =
12번째 줄: 14번째 줄:
 
사이트 공지사항 밑이나 문서 헤더 위의 광고 코드를 배치할 SiteNoticeAfter hook를 사용합니다.
 
사이트 공지사항 밑이나 문서 헤더 위의 광고 코드를 배치할 SiteNoticeAfter hook를 사용합니다.
  
[[file:header_ad]]
+
[[file:Header ad.jpeg]]
  
  
33번째 줄: 35번째 줄:
 
</source>
 
</source>
  
= Footer =
 
  
The SkinAfterContent hook. allows us to display a banner right after the article content.
+
 
 +
 
 +
= 바닥글 =
 +
 
 +
SkinAfterContent Hook입니다. 문서 내용 후 배너를 표시 할 수 있습니다.
  
 
[[file:footer_ad.jpg]]
 
[[file:footer_ad.jpg]]
  
Most horizontal ads would fit nicely for this location. As before, the ad code goes between the EOT lines. This time, however, we need to wrap it in a <div> to center-align the ad.
+
이전과 같이 EOT 다음에 광고코드를 삽입합니다. 대부분의 수평광고는 위치가 잘 맞는 편입니다. 어째든 한번더 <div>를 이용해서 광고를 중앙에 위치할수 있도록 지정해줍니다.
  
 
<source lang='php'>
 
<source lang='php'>
61번째 줄: 66번째 줄:
 
</source>
 
</source>
  
= Sidebar =
 
  
sidebar_ad
 
Placing an ad in the sidebar, turns out to be a little trickier than the header and the footer. The SkinBuildSidebar allows us to insert ads between the Navigation portal and the ToolBox portal in the sidebar. However there are few caveats:
 
  
The first one, is that in the default Vector skin, the portals are collapsible. This may be a nice feature, but I’m not sure having an option to hide ads is such a good idea. Hence we add a little JavaScript snippet that makes the ad portal permanent.
 
  
Secondly, each portal in the sidebar has a title. The title of the portal containing the ads will be “Ads”. If your wiki is non-english, you’ll probably want to translate it. To do so, you simply need to create the page MediaWiki:Ads in your wiki and write the translation there.
+
= 사이드 바 =
 +
 
 +
[[file:sidebar_ad.jpg|right|border]]
 +
 
 +
사이드바에 광고를 배치하는 것은 기존 머리글과 바닥글에 광고를 삽입하는 것보다 까다롭습니다. SkinBuildSidebar은 Navigation portal and the ToolBox사이에 광고를 삽입할 수 있도록 해줍니다.그러나 몇 가지 주의 사항이 있습니다 :
 +
 
 +
첫번째는, 기본 벡터 스킨을 사용할때 광고크기를 잘 선택해야 합니다. 옆에 표시된 광고는 120x600px 스카이스크래퍼 광고입니다.
 +
 
 +
둘째, 사이드 바에서 각 포털은 제목이 있습니다.광고가 포함 된 포털의 제목은 "Ads"입니다. 위키 영어가 아닌 경우, 당신은 아마 그것을 번역하는 것이 좋습니다. 위키에 광고 거기에 번역을 쓰기 이렇게하려면, 당신은 MediaWiki:Ads 페이지를 당신의 위키를 작성해야합니다.
 +
 
 +
 
 +
<source lang='php'>
 +
$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
 +
        $out = <<< EOT
 +
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
 +
<!-- gamedic sidebar2 -->
 +
<ins class="adsbygoogle"
 +
    style="display:inline-block;width:120px;height:600px"
 +
    data-ad-client="ca-pub-69332184xxxxxxxxx"
 +
    data-ad-slot="4372734253"></ins>
 +
<script>
 +
(adsbygoogle = window.adsbygoogle || []).push({});
 +
</script>
 +
EOT;
 +
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
 +
        $bar['Ads'] = $out;
 +
        return true;
 +
};
 +
</source>
 +
 
 +
 
 +
 
 +
만약 160x600 와이드 스카이스크래퍼 광고를 삽입하고 싶으시면 아래와 같이 스킨의 크기를 크게 변경한 후에 삽입해주세요.
  
Thirdly, the sidebar is a too narrow for 160x600px vertical skyscraper, which is the narrowest recommended vertical placement size. You could either use narrower ad size, which as Google AdSense warns have significantly less stock, or increase a bit the size of the sidebar. Increasing the size of the sidebar should be done per skin. For the default vector skin, the can be done by editing the MediaWiki:Vector.css page (creating it if necessary) and adding the following lines:
 
  
 
<source lang='php'>
 
<source lang='php'>
87번째 줄: 119번째 줄:
 
#left-navigation { margin-right: 12em; }
 
#left-navigation { margin-right: 12em; }
 
</source>
 
</source>
Below is the code that needs to be placed in LocalSettings.php. Again, you should replace the ad code between the EOT lines.
+
 
 +
LocalSettings.php 아래에 배치 될 필요가 코드이다. 다시 말하지만, 당신은 EOT 라인 사이의 광고 코드를 교체해야합니다.
  
 
<source lang='php'>
 
<source lang='php'>
106번째 줄: 139번째 줄:
 
};
 
};
 
</source>
 
</source>
The three types of ads can be previewed in this wiki.
+
광고의 세 가지 유형 중 2가지를 이 GameDic에서 미리 볼 수 있습니다.
 
+
  
 
= 원문 =
 
= 원문 =
  
 
https://www.guyrutenberg.com/2014/10/13/displaying-google-adsense-in-mediawiki/#comments
 
https://www.guyrutenberg.com/2014/10/13/displaying-google-adsense-in-mediawiki/#comments

2015년 11월 24일 (화) 07:59 기준 최신판

미디어위키에서 구글 애드센스 연동하기

미디어위키에 광고를 보여주는 코드를 삽입하는 방법을 알려주는 글입니다. 스킨에 광고를 삽입하는 방법 대신에 hooks를 이용합니다. 이 방법은 2가지 장점이 있습니다.

  • 개별적으로 각각의 스킨을 수정할 필요가 없습니다. 이것은 사용자가 스킨을 변경하더라도 광고를 동일한 장소에 디스플레이 될것입니다.
  • 업그레이드 작업이 간단합니다. Hooks는 스킨과는 달리, 미디어 위키의 버전 업그레이드에 의해 수정되지 않은 LocalSettings.php에 있습니다.

아래의 예는 각 페이지의 머리글, 바닥글 및 사이드 바에 광고를 삽입하는 방법을 보여줍니다. 구글 애드 센스 광고 서비스 코드를 사용했지만, 그것은 쉽게 다른 광고 네트워크의 광고 서비스 코드에 의해 대체 될 수 있습니다.


머리글

사이트 공지사항 밑이나 문서 헤더 위의 광고 코드를 배치할 SiteNoticeAfter hook를 사용합니다.

Header ad.jpeg


다음 코드를 LocalSettings.php에 추가합니다. 당신은 당신이 받은 광고코드와 일치하도록 EOT 라인 사이의 광고 코드를 수정해야합니다.일반적으로 728x90px 리더 보드를 사용하시면 됩니다.

$wgHooks['SiteNoticeAfter'][] = function(&$siteNotice, $skin) {
        $siteNotice .= <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        return true;
};



바닥글

SkinAfterContent Hook입니다. 문서 내용 후 배너를 표시 할 수 있습니다.

Footer ad.jpg

이전과 같이 EOT 다음에 광고코드를 삽입합니다. 대부분의 수평광고는 위치가 잘 맞는 편입니다. 어째든 한번더
를 이용해서 광고를 중앙에 위치할수 있도록 지정해줍니다.
$wgHooks['SkinAfterContent'][] = function(&$data, $skin) {
        global $myAdCode;
        $data .= '<div style="text-align:center;">';
        $data .= <<< EOT
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:728px;height:90x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
 
        $data .= '</div>';
        return true;
};



사이드 바

Sidebar ad.jpg

사이드바에 광고를 배치하는 것은 기존 머리글과 바닥글에 광고를 삽입하는 것보다 까다롭습니다. SkinBuildSidebar은 Navigation portal and the ToolBox사이에 광고를 삽입할 수 있도록 해줍니다.그러나 몇 가지 주의 사항이 있습니다 :

첫번째는, 기본 벡터 스킨을 사용할때 광고크기를 잘 선택해야 합니다. 옆에 표시된 광고는 120x600px 스카이스크래퍼 광고입니다.

둘째, 사이드 바에서 각 포털은 제목이 있습니다.광고가 포함 된 포털의 제목은 "Ads"입니다. 위키 영어가 아닌 경우, 당신은 아마 그것을 번역하는 것이 좋습니다. 위키에 광고 거기에 번역을 쓰기 이렇게하려면, 당신은 MediaWiki:Ads 페이지를 당신의 위키를 작성해야합니다.


$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
        $out = <<< EOT
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- gamedic sidebar2 -->
<ins class="adsbygoogle"
     style="display:inline-block;width:120px;height:600px"
     data-ad-client="ca-pub-69332184xxxxxxxxx"
     data-ad-slot="4372734253"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
        $bar['Ads'] = $out;
        return true;
};


만약 160x600 와이드 스카이스크래퍼 광고를 삽입하고 싶으시면 아래와 같이 스킨의 크기를 크게 변경한 후에 삽입해주세요.


/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#footer, #mw-head-base, div#content { margin-left: 12em; }
#left-navigation { margin-left: 12em; }

If your wiki is in RTL language, you need to use a modified snippet:

/* increase Vector sidebar width to accommodate ads */
div#mw-panel { width: 12em; }
div#footer, #mw-head-base, div#content { margin-right: 12em; }
#left-navigation { margin-right: 12em; }

LocalSettings.php 아래에 배치 될 필요가 코드이다. 다시 말하지만, 당신은 EOT 라인 사이의 광고 코드를 교체해야합니다.

$wgHooks['SkinBuildSidebar'][] = function($skin, &$bar) {
        $out = <<< EOT
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
    style="display:inline-block;width:160px;height:600x"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxxx"
    data-ad-slot="6440411535"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
EOT;
        $out .= "<script>$('#p-Ads').addClass('persistent');</script>";
        $bar['Ads'] = $out;
        return true;
};

광고의 세 가지 유형 중 2가지를 이 GameDic에서 미리 볼 수 있습니다.

원문

https://www.guyrutenberg.com/2014/10/13/displaying-google-adsense-in-mediawiki/#comments