Bulma x WordPress

毎回めんどくさいのでもうまとめる

アーカイブ用ページネーション

pagination-archive.php

<?php
global $wp_query;
$src = "";
$big = 99999999;
$current = max(1, get_query_var('paged'));
$page_format = paginate_links([
		'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big)) ),
		'format' => '?paged=%#%',
		'current' => $current,
		'total' => $wp_query->max_num_pages,
		'type'  => 'array',
		'prev_text'    => '&laquo; PREV',
		'next_text'    => 'NEXT &raquo;',
]);
if ( !is_array($page_format) ) return;
$paged = ( get_query_var('paged') == 0 ) ? 1 : get_query_var('paged');

$prev = '';
$next = '';

foreach ($page_format as $pf) {
	if ( _matchesIn($pf, 'prev') ) {
		$prev = str_replace(['prev'], 'pagination-previous', $pf);
		$prev = str_replace(['&laquo; PREV'], '前へ', $prev);
	} elseif ( _matchesIn($pf, 'next') ) {
		$next = str_replace(['next'], 'pagination-next', $pf);
		$next = str_replace(['NEXT &raquo;'], '次へ', $next);
	}
}
if ( empty($prev) ) {
	$prev = '<a class="pagination-previous">前へ</a>';
} elseif ( empty($next) ) {
	$next = '<a class="pagination-next">次へ</a>';
}
?>

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
	<?php echo $prev;?>
	<?php echo $next;?>
	<ul class="pagination-list">
<?php
foreach ($page_format as $pf) {
	if ( _matchesIn($pf, ['prev', 'next']) ) continue;
	$pf = str_replace('dots', 'pagination-ellipsis', $pf);
	$pf = str_replace('current', 'is-current', $pf);
	$pf = str_replace('page-numbers', 'pagination-link', $pf);
	printf('<li>%s</li>', $pf);
}
?>
	</ul>
</nav>

シングル用ページネーション

pagination-single.php

<nav class="pagination is-centered" role="navigation" aria-label="pagination">
<?php if (get_previous_post()):?>
	<?php echo str_replace('rel', 'class="pagination-previous" rel', get_previous_post_link('%link', '&laquo; 前の記事'));?>
<?php else:?>
	<a class="pagination-previous" rel="prev" style="opacity:0.5;">&laquo; 前の記事</a>
<?php endif;?>
<?php if (get_next_post()):?>
	<?php echo str_replace('rel', 'class="pagination-next" rel', get_next_post_link('%link' ,'次の記事 &raquo;'));?>
<?php else:?>
	<a class="pagination-next" rel="prev" style="opacity:0.5;">次の記事 &raquo;</a>
<?php endif;?>
</nav>

ヘッダー

navbar.php

<header id="header" class="header" role="banner">
	<nav id="navbar" class="navbar has-shadow is-spaced">
		<div class="container">
			<div class="navbar-brand">
				<a class="navbar-item is-size-5" href="/"><?php echo get_option('blogname');?></a>
				<a id="navbarBurger" class="navbar-burger burger" role="button" data-target="navMenu" aria-label="menu" aria-expanded="false">
					<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
				</a>
			</div>

<!-- ハンバーガー -->
<div id="navMenu" class="navbar-menu">
    <div class="navbar-start is-hidden-desktop">
        <a class="navbar-item" href="#">#</a>
    </div>
</div><!-- /.navbar-menu -->

		</div>
	</nav>
</header><!-- #header -->

アコーディオン的なやつ

extensionのやつは色々だめなのでドキュメントのやつ拝借する
javascriptも拝借する

accrodion.php

<nav id="categories" class="bd-categories">
    <div class="bd-category">
        <header class="bd-category-header">
            <a class="bd-category-toggle"><span class="icon"><i class="fas fa-chevron-down"></i></span></a>
            <a class="bd-category-name">親</a>
        </header>
        <ul class="bd-category-list">
            <li><a href="#">子</a></li>
        </ul>
    </div>
</nav>

Javascript

bulma.js

'use strict';

document.addEventListener('DOMContentLoaded', function () {
  // Toggles
  var $burgers = getAll('.burger');
  if ($burgers.length > 0) {
    $burgers.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        var $target = document.getElementById(target);
        $el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }

  // Modals
  var rootEl = document.documentElement;
  var $modals = getAll('.modal');
  var $modalButtons = getAll('.modal-button');
  var $modalCloses = getAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button');
  if ($modalButtons.length > 0) {
    $modalButtons.forEach(function ($el) {
      $el.addEventListener('click', function () {
        var target = $el.dataset.target;
        openModal(target);
      });
    });
  }

  if ($modalCloses.length > 0) {
    $modalCloses.forEach(function ($el) {
      $el.addEventListener('click', function () {
        closeModals();
      });
    });
  }

  function openModal(target) {
    var $target = document.getElementById(target);
    rootEl.classList.add('is-clipped');
    $target.classList.add('is-active');
  }

  function closeModals() {
    rootEl.classList.remove('is-clipped');
    $modals.forEach(function ($el) {
      $el.classList.remove('is-active');
    });
  }

  // Functions
  function getAll(selector) {
    return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
  }

  // Utils
  function removeFromArray(array, value) {
    if (array.includes(value)) {
      var value_index = array.indexOf(value);
      array.splice(value_index, 1);
    }
    return array;
  }

  Array.prototype.diff = function (a) {
    return this.filter(function (i) {
      return a.indexOf(i) < 0;
    });
  };


  //Sidebar links
  var $categories = getAll('#categories .bd-category');
  if ($categories.length > 0) {
    $categories.forEach(function (el) {
      var toggle_el = el.querySelector('.bd-category-toggle');
      toggle_el.addEventListener('click', function (event) {
        // closeCategories(el);
        el.classList.toggle('is-active');
      });
    });
  }
  function closeCategories(current_el) {
    $categories.forEach(function (el) {
      if (current_el == el) {
        return;
      }
      el.classList.remove('is-active');
    });
  }

});