Cms/mediawiki/レスポンシブ化

mediawikiバージョン

1.24.2

twitter_bootstrapのcssを追加

• skins/Vector/VectorTemplate.php

  $this->data['personal_urls'] =
    array_reverse( $this->data['personal_urls'] );
}
// 追加start
$linkstr = <<<EOD
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="/skins/Vector/bootstrap_return.css" />
EOD;
$head = $this->get('headelement');
$head = str_replace("</head>", $linkstr."</head>", $head);
$this->set('headelement', $head);
// 追加end
   // Output HTML Page
   $this->html( 'headelement' );

twitter_bootstrap.cssで崩れたデザインを戻すcssを追加

• skins/Vector/bootstrap_return.css

body {
 font: large sans-serif;
 background: #f9f9f9 0 0 no-repeat;
 color: black;
}
@media (max-width: 991px) {
 #mw-navigation h2 {
   font: x-large sans-serif;
   position: static;
   top: 0;
 }
 div#mw-panel {
   position: static;
   top: 0;
   padding-top: 1em;
   width: 10em;
   left: 0;
   font: x-large sans-serif;
 }
 #content {
   margin-top: 0;
   margin-left: 0;
 }
 #mw-page-base {
   height: 0;
 }
 #mw-head-base {
   margin-top: 0;
   margin-left: 0;
   height: 0;
 }
}

フッターは幅がでかいのでスマホ時に消す

footerをhidden-xs hidden-smで囲む

<div class="hidden-xs hidden-sm">
 <div id="footer" role="contentinfo"<?php $this->html( 'userlangattributes' ) ?>>
 略

ヘッダーのコンテンツ操作ボタンをスマホ時に消す

mw-headをhidden-xs hidden-smで囲む

   <div class="hidden-xs hidden-sm">
     <div id="mw-head">
       <?php $this->renderNavigation( 'PERSONAL' ); ?>
       <div id="left-navigation">
         <?php $this->renderNavigation( array( 'NAMESPACES', 'VARIANTS' ) ); ?>
       </div>
       <div id="right-navigation">
         <?php $this->renderNavigation( array( 'VIEWS', 'ACTIONS', 'SEARCH' ) ); ?>
       </div>
     </div>
   </div>

スマホ時のコンテンツフッターにページタイトルを追加

</div>
<!-- add -->
<div class="visible-xs-block visible-sm-block" align="center">
     <?php $this->get( 'title' ); ?>
</div>
<!-- /add -->
<div id="mw-panel">