xoopsテーマの作成

このトピックの投稿一覧へ

xoopsテーマの作成

msg# 1

depth:: 0

前の投稿 - 次の投稿 | 親投稿 - 子投稿.1 | 投稿日時 2019/8/13 21:44 | 最終変更

タツ

投稿数: 2400 オンライン

xoops（xoops cube）のデザインテーマは以前作成していたサイトも無くなるなどますます気に入ったものが入手困難になっています。このサイトではxoops用ではなく普通のレスポンシブのテンプレートを編集して導入しています。

テンプレートはhtml5up-dopetropeでライセンスもCCA3.0という事で改変等自由に使えるものと解釈しています。携帯にも対応しお気に入りのテンプレートです。久しぶりに見るとバージョンが新しくなっていたので再度作成し直すこととしました。その時の備忘録です。

具体的な導入方法は、ダウンロード後、xoopsのthemeフォルダにフォルダごと名前を変更して設置しフォルダ内のテンプレートのright-sidebar.html(名前をtheme.htmlと変更）とassets/css/main.cssを編集すればxoopsのthemeとして機能させることができます。

theme.htmlを以下のように編集します。
head部分と最後のスクリプトをxoops用に変更します。

<head>
    <title>Dopetrope by HTML5 UP</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>

この部分を

<head>
    <title><{$xoops_sitename}> - <{$xoops_pagetitle}></title>
    <meta charset="<{$xoops_charset}>" />
    <meta name="robots" content="<{$xoops_meta_robots}>" />
    <meta name="keywords" content="<{$xoops_meta_keywords}>" />
    <meta name="description" content="<{$xoops_meta_description}>" />
    <meta name="rating" content="<{$xoops_meta_rating}>" />
    <meta name="author" content="<{$xoops_meta_author}>" />
    <meta name="copyright" content="<{$xoops_meta_copyright}>" />
    <meta name="generator" content="XOOPS Cube" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="<{$xoops_imageurl}>assets/css/main.css" />
    <link href="<{$xoops_url}>/favicon.ico" rel="ICON" />
    <!-- added script xoops.js -->
    <script type="text/javascript" src="<{$xoops_url}>/include/xoops.js"></script>
    <!-- RMV: added module header -->
    <{$xoops_module_header}>
</head>

また最後に記述されているの部分も変更が必要です。

<!-- Scripts -->
    <script src="<{$xoops_imageurl}>assets/js/jquery.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/jquery.dropotron.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/browser.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/breakpoints.min.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/util.js"></script>
    <script src="<{$xoops_imageurl}>assets/js/main.js"></script>

次にメニューの作成です。メニューはxoopsモジュールのマルチメニューを利用しました。マルチメニューのブロック管理にてタイトルを「multi_menu1」（このタイトルを利用）とします。

以下の部分を次のように変更し、マルチメニューをメニューに反映させます

<!-- Nav -->
<nav id="nav">
<ul>      
    <{if $xoops_isadmin}><li><a href="<{$xoops_url}>/admin.php">管理メニュー</a></li><{/if}>
        <li><a href="<{$xoops_url}>/">ホーム</a></li>       
        <{foreach item=block from=$xoops_lblocks}>
      <{if $block.title == "multi_menu1"}>
      <{$block.content}>
      <{/if}>
        <{/foreach}>
</ul>
</nav>

以下コンテンツを含む右のラインをの内容を変更します

<!-- Content -->
    <article class="box post">
    <{* xoops センターブロックcontents *}>
    <section>
    
        <div><{$xoops_contents}></div>
            
        <{if $xoops_showcblock == 1}>
            
            <{foreach item=block from=$xoops_clblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>

            <{foreach item=block from=$xoops_ccblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>
            
            
            <{foreach item=block from=$xoops_crblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
            <{/foreach}>
            
        <{/if}>
        </section>
    </article>

以下の部分を次のように変更します。この時マルチメニューの内容は表示しないようにします。

<!-- Sidebar -->
    <{* xoops 左右ブロック contents *}>
        <section class="box">
        <{if $xoops_showlblock == 1}>
        <{foreach item=block from=$xoops_lblocks}>
        <{if $block.title != "multi_menu1"}>
            <{if !$block.title|strstr:"none"}>
                <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
        <{/if}>
        <{/foreach}>
        <{/if}>
        <{if $xoops_showrblock == 1}>
        <{foreach item=block from=$xoops_rblocks}>
            <{if !$block.title|strstr:"none"}>
            <header class="major">
            <h2><{$block.title}></h2>
            </header>
            <{/if}>
            <div><{$block.content}></div>
        <{/foreach}>
        <{/if}>
    </section>

main.cssの編集
以下のような目立つ不具合がありassets→css→main.cssを編集します

checkboxが表示されない 68行目辺り
inputのcssで

    input, select, textarea {
        /*-moz-appearance: none;del checkbox 削除*/
        /*-webkit-appearance: none; del checkbox 削除*/
        /*-ms-appearance: none;del checkbox 削除*/
        /*appearance: none;del checkbox 削除*/

テーブルから文字がはみ出る 1500行目辺り

/* Tables */

table {
        table-layout: fixed; /* 追加 */
        width: 100%;
    }

        table tr {
            overflow-wrap: break-word; /* 追加 */
            word-wrap: break-word; /* 追加 */
            border-top: solid 1px #dddddd;
        }

            table tr:first-child {
                border-top: 0;
            }

        table td {
            overflow-wrap: break-word; /* 追加 */
            word-wrap: break-word; /* 追加 */
            padding: 0.5em 1em 0.5em 1em;
        }

文章がコンテンツ枠からはみ出る 2309行目辺り

/* Main */
    #main {
        overflow-wrap: break-word; /* 追加 */
        word-wrap: break-word; /* 追加 */

ckeditor4のテキスト部分が背景色（#252122）が反映されそのままでは使えない

85行目辺り
/* Basic */
body {
        /* background: #252122; 削除*/
        background-image: url("images/bg02.png");

2337行目辺り
/* Footer */
    #footer {
        background: #252122; /*追加 */
        position: relative;
        color: #858484;
        padding: 4em 0;
    }

2663行目辺り
#navPanel {

     background-image: url("images/bg02.png") 変更→ background: #252122;
     
    }

これで基本的なxoopsテーマとしての変更は終了です。ワードプレスのテンプレートと同様で海外のテンプレートなので日本語にするとデザインが崩れこのままだとあまり見栄えの良くないものです。あとはこのmain.cssの細部を編集して全体のデザインを整える必要があります。また、場合によってはxoops独自のcssもここに追加するのも良いでしょう。

投票数:46 平均点:2.39

投稿ツリー

xoopsテーマの作成 (タツ, 2019/8/13 21:44)
- Re: xoopsテーマの作成 (nonn50, 2019/8/14 9:33)
  - Re: xoopsテーマの作成 (タツ, 2019/8/14 22:01)

今日 :	8
昨日 :	655
総計 :	1628761

ソロツーリングと気ままな旅

旅と気ままなフォーラム