Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@ki6ool

Bulma x WordPress

More than 1 year has passed since last update.

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

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

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

});
1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ki6ool
絶対ワードプレス使うマン

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
1
Help us understand the problem. What is going on with this article?