IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / javascript / はてなブログのカテゴリーを階層化する(jQueryなし)

はてなブログのカテゴリーを階層化する(jQueryなし)

2019/04/12 javascript, はてなプラグイン, はてなブログ

前記事で、運用しているブログを統合しようとして、その際、移動する方のブログのカテゴリーをひとつにまとめたほうが煩雑にならずにすむだろうと考えたのですが、ふとカテゴリーを階層化すればと気づきググってみれば、ああ、もうやっている人がいるではありませんか!

ということで、jQuery を使わない素の Javascript で書いてみました。

  • 使用条件
  • デモ画像
  • Javascript
    • お願い
  • CSS

使用条件

ただひとつです。

  • 階層化したいカテゴリーは「親カテゴリー-子カテゴリー」の書式で書く
    間にスペースなしのハイフン - です

これだけです。また、階層化は2階層までです。

親カテゴリーだけのカテゴリーはなくてもいいし、カテゴリーの並び替え順は何でも問題ありません。

デモ画像

  • テーマは「Smooth(デフォルト)」のままです
  • カテゴリーモジュールの とことこ-さわやか とことこ-さくら が階層化されています
    これは とことこ の親カテゴリーが存在するケースです
  • 一番下の マンション管理組合 のカテゴリーは、マンション管理組合-ブログ のみです
    この場合は、リンク先のない親カテゴリーを自動的に作ります
  • タイトル下の階層カテゴリーは子カテゴリーのみの表示になります

  • パンくずリストの階層カテゴリーも子カテゴリーのみの表示になります

Javascript

※改善版が(improvement)はてなブログのカテゴリー階層化にあります。

お願い

  • 改変、バグフィックスに対応できなくなりますのでスクリプトの転載はしないでください
  • ご使用は自己責任でお願いします
  • お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします

<script>
(function(){
    const catModule = document.getElementsByClassName('hatena-module-category')[0];
    if(catModule === undefined) return;
    const catLists = catModule.getElementsByTagName('li');
    const obj = new Object();
    Array.prototype.forEach.call(catLists, function(list){
        var catName = list.children[0].textContent.split('-');
        if(catName.length > 1){
            list.children[0].textContent = catName[1];
            if(obj.hasOwnProperty(catName[0])){
                let i = 0;
                while(obj[catName[0]][i] !== undefined) i++;
                obj[catName[0]][i] = list;
            }else{
                obj[catName[0]] = new Object();
                obj[catName[0]][0] = list;
            }
        }
    });


    for(let key in obj){
        const fragment = document.createDocumentFragment();
        let complete = false;
        let i = 0;
        while(obj[key][i] !== undefined){
            fragment.appendChild(obj[key][i]);
            i++;
        }
        const ul = document.createElement('ul');
        ul.appendChild(fragment);
        
        Array.prototype.forEach.call(catLists, function(list){
            if(list.children[0].textContent.indexOf(key) !== -1){
                list.appendChild(ul);
                complete = true;
            }
        });
        if(!complete){
            const parentLi = document.createElement('li');
            parentLi.textContent = key;
            parentLi.appendChild(ul);
            document.getElementsByClassName('hatena-module-category')[0].getElementsByClassName('hatena-urllist')[0].appendChild(parentLi);
        }
    }


    if(document.body.classList.contains('page-entry')){
        var links = document.getElementsByClassName('entry-category-link');
    }else{
        var links = document.getElementsByClassName('archive-category-link');
    }
    Array.prototype.forEach.call(links, function(link){
        var catName = link.textContent.split('-');
        if(catName.length > 1) link.textContent = catName[1];
    });
    
    const topBox = document.getElementById('top-box');
    if(topBox !== null){
        const breadcrumbs = topBox.getElementsByTagName('span');
        Array.prototype.forEach.call(breadcrumbs, function(breadcrumb){
            const bcName = breadcrumb.textContent.split('-');
            if(bcName.length > 1) breadcrumb.textContent = bcName[1];
        });
    }
})();
</script>

デザイン -> カスタマイズ -> フッタ に入れてください。

CSS

近日中に、imzModules に統合してサンプルCSSを公開予定です。

www.imuza.com

Joomla! 3.9.5 セキュリティ & バグフィックスがリリースされています
はてなブログのカテゴリーを階層化し別ブログに統合した
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com