WordPress
Bulma

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');
});
}

});