Afstamming Boersma


De integratie van

en

De methode van Cees Kloosterman

Ik heb voor de integratie van TNG met WordPress gekozen voor de methode van Cees Kloosterman. Op zijn site staat een duidelijke beschrijving en die heb ik gevolgd.

Het WordPress thema

Test de installatie door in het menu van WordPress een aangepaste link te maken naar TNG, bijvoorbeeld naar: http://uwdomein/uwtngfolder/surnames.php

Ongetwijfeld zal het overzicht met familienamen getoond worden, maar de kans is groot dat de opmaak van deze pagina afwijkt van de originele opmaak in TNG. Dit wordt veroorzaakt door het thema van WordPress. De CSS stijlregels van het thema zorgen nu ook voor de opmaak van de TNG pagina’s. Dat levert vaak genealogie pagina’s op, die er niet uitzien.

De CSS problematiek

Ik heb talloze thema’s in WordPress geïnstalleerd en niet één liet de opmaak van de genealogie pagina’s ongemoeid. Een lastig probleem diende zich daarmee aan. Er zou gesleuteld moeten worden aan de CSS styling van het thema of aan de styling van TNG of aan beide.

Bouw zelf een thema in WordPress

De oplossing voor de CSS problematiek vond ik op een andere manier omdat ik tegen deze site aanliep. Op die site wordt de bouw beschreven van een responsive WordPress thema met behulp van HTML5. Het CSS stylesheet van het thema was kort met alleen de meest noodzakelijke stijlregels. In combinatie met TNG moest dat een beheersbaar concept opleveren. En dat deed het.

Voor wie het ook wil proberen, hierna volgt een uitgebreide beschrijving van de volledige installatie.

Hoe ik het deed

Een stapsgewijze beschrijving van het complete installatieproces.

Voor de methode van Cees Kloosterman zie deze site.
De root noemen we in deze beschrijving public-html. In de praktijk kan die best een andere naam hebben. Dat is afhankelijk van uw hostingprovider. Ga nu als volgt te werk:

1. Maak een MySQL database aan. WordPress en TNG zullen van deze database gezamenlijk gebruik maken.
2. Maak in de root een map aan met de naam tng In die map wordt TNG geïnstalleerd.
3. Kopieer de installatiebestanden van WordPress naar de map public-html
4. Voer de installatie van WordPress uit
5. Kopieer de installatiebestanden van TNG naar de map public-html/tng
6. Voer de installatie van TNG uit

Maak in de map public-html/tng een bestand aan met de naam : WPTNG-topmenu.php en geef dit bestand de volgende inhoud:
<?php
require (“../wp-blog-header.php”);
get_header ();
?>

Maak in de map public-html/tng een bestand aan met de naam : WPTNG-meta.php en geef dit bestand de volgende inhoud:
<?php
global $cms;
?>
<link href=”<?php echo $cms[‘tngpath’]; ?>
css/YOUR-TNG-EXTRA.css” rel=”stylesheet” type=”text/css”/>

Maak in de map public-html/tng een bestand aan met de naam : WPTNG-footer.php en geef dit bestand de volgende inhoud:
<?php
get_footer ();
?>

Ga nu naar het administratiemenu van TNG om bij de algemene instellingen wijzigingen aan te brengen in de site-opmaak en definitie ( ga naar : Instellingen >> Configuratie >> Algemene Instellingen) en wijzig het volgende:
Persoonlijke kopregels (Header) in:  WPTNG-topmenu.php
Persoonlijke voetregels (Footer)in: WPTNG-footer.php
Persoonlijke meta in: WPTNG-meta.php

Blijf in het administratiemenu van TNG en ga naar Instellingen >> Configuratie >> Sjabloon instellingen en wijzig daar Sta Sjabloon Selectie toe in: Nee

Stel nu vast of de installatie tot het gewenste resultaat geleid heeft. Maak in het menu van WordPress een link aan naar een TNG pagina. Dat kan het overzicht met familienamen zijn en de link in het menu komt er dan zo uit te zien: http://uwdomeinnaam/tng/surnames.php.

Het kleurenschema van TNG.
In TNG heeft ieder template zijn eigen kleurenschema. Zelf maak ik gebruik van de kleuren van template#15. Het is heel eenvoudig een ander kleurenschema te kiezen. Dat gaat als volgt:
1. Ga naar de CSS map van een template, bijvoorbeeld public-html/tng/templates/template15/css
2. Kopieer alle bestanden uit die map naar de map public-html/tng/css
3. De TNG pagina’s zullen nu opgemaakt worden met de kleuren van template#15

 

De thema’s van WordPress staan in de map: public-html/wp-content/themes
De naam van het zelf te bouwen thema kan vrij gekozen worden. Mijn thema kreeg de naam TNG Support en die zullen we dan ook maar gebruiken voor de beschrijving, die nu volgt.

1. Begin met de aanmaak van een map voor het nieuwe thema. Geef die map de naam tngsupport en maak die aan in de map public-html/wp-content/themes
2. Vervolgens moeten in de map public-html/wp-content/themes/tngsupport de volgende bestanden aangemaakt worden:
    header.php
    index.php
    footer.php
    functions.php
    sidebar.php
    single.php
    page.php
    style.css
    In deze bestanden wordt de code van het thema wordt vastgelegd. Vul de bestanden met de code, die te vinden is op deze site: How to Create a Responsive  WordPress Theme Using HTML5.

Nadat de noodzakelijke code voor de bestanden is aangemaakt kan in WordPress het thema geactiveerd worden. Wanneer de resultaten van het thema bekeken worden dan zal het opvallen dat het menu nog niet zo fraai oogt en dat in de customizer van het thema een optie ontbreekt om een kopafbeelding toe te voegen. Dat wordt hierna hersteld.

Het Menu.
Ik heb gebruik gemaakt van de informatie op deze site: WordPress 3 Drop Down Menu Tutorial. De uitleg is helder en de extra code, die in het bestand functions.php vastgelegd moet worden, is goed beschreven. Bovendien is het mogelijk verschillende menu-uitvoeringen te downloaden en deze op een wel heel eenvoudige manier te installeren, simpel door de map cssmenu te kopiëren naar de map public-html/wp-content/themes/tngsupport.

De kopafbeelding.
Op deze site: How To Add Header Image Support In WordPress vond ik de informatie die ik nodig had. Nadat ik de extra code had vastgelegd in het bestand functions.php kon ik met behulp van de customizer van het thema een kopafbeelding toevoegen.

Afronding.
Als extra informatie volgt hierna nog de inhoud van de themabestanden, zoals ik die op deze site gebruik.

De inhoud van mijn thema bestanden

<!DOCTYPE html>
<html <?php language_attributes(); ?>
 <head>
   <title><?php bloginfo(‘name’); ?> &raquo; <?php is_front_page() ? bloginfo(‘description’) : wp_title(”); ?></title>
   <meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
   <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
   <link rel=”stylesheet” href=”<?php bloginfo(‘stylesheet_url’); ?>”>
   <?php wp_head(); ?>
 </head>
 <body <?php body_class(); ?>>
<br>
<?php 
wp_nav_menu(array( 
  ‘menu’ => ‘HoofdMenu’,
  ‘container_id’ => ‘cssmenu’,
  ‘walker’ => new CSS_Menu_Maker_Walker()
));
?>
<br><br><br>
<?php the_header_image_tag(); ?>
<br><br><br>

<footer>
      <p>Copyright &copy; 2019<br>Deze site is gebouwd met WordPress en de <a style =”color: #ffcc33; “href=”http://www.tngsitebuilding.com” target=”_blank” title=”Learn more about TNG”>The Next Generation of Genealogy Sitebuilding</a> &copy;, v. 12.0.3, geschreven door Darrin Lythgoe 2001-2019.<br>De site wordt onderhouden door Jan Boersma</p>
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>

<?php if ( is_active_sidebar( ‘sidebar’ ) ) : ?>
  <aside id=”primary-sidebar” class=”primary-sidebar widget-area” role=”complementary”>
    <?php dynamic_sidebar( ‘sidebar’ ); ?>
  </aside>
<?php endif; ?>

<?php get_header(); ?>
<main class=”wrap”>
  <section class=”content-area content-full-width”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class=”article-full”>
        <header>
          <!– <h2><?php the_title(); ?></h2> –>
          <!– By: <?php the_author(); ?> –>
        </header>
        <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no page was found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

<?php get_header(); ?>
<main class=”wrap”>
  <section class=”content-area content-full-width”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class=”article-loop”>
        <header>
          <!– <h2><a href=”<?php the_permalink(); ?>” title=”<?php the_title_attribute(); ?>”><?php the_title(); ?></a></h2> –>
          <!– By: <?php the_author(); ?> –>
        </header>
        <?php the_excerpt(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no posts were found!</p>
      </article>
<?php endif; ?>
  </section><?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>

<?php
// This function enqueues the Normalize.css for use. The first parameter is a name for the stylesheet, the second is the URL. Here we
// use an online version of the css file.
function add_normalize_CSS() {
    wp_enqueue_style( ‘normalize-styles’, “https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css”);
}
// Register a new sidebar simply named ‘sidebar’
function add_widget_Support() {
                register_sidebar( array(
                                ‘name’          => ‘Sidebar’,
                                ‘id’            => ‘sidebar’,
                                ‘before_widget’ => ‘<div>’,
                                ‘after_widget’  => ‘</div>’,
                                ‘before_title’  => ‘<h2>’,
                                ‘after_title’   => ‘</h2>’,
                ) );
}
// Hook the widget initiation and run our function
add_action( ‘widgets_init’, ‘add_Widget_Support’ );
// Register a new navigation menu
function add_Main_Nav() {
  register_nav_menu(‘header-menu’,__( ‘Header Menu’ ));
}
// Hook to the init action hook, run our navigation menu function
add_action( ‘init’, ‘add_Main_Nav’ );
// Support for header image
add_theme_support(‘custom-header’, array(
    ‘default-image’ => ”, // set default header image
    ‘width’ => 1500, // set the width for header image
    ‘height’ => 500, // set the height for header image
    ‘flex-height’ => true, // enable flex height
    ‘flex-width’ => true, // enable flex width
));
// Support for css drop down menu from MenuMaker
add_action(‘wp_enqueue_scripts’, ‘cssmenumaker_scripts_styles’ );

function cssmenumaker_scripts_styles() { 
   wp_enqueue_style( ‘cssmenu-styles’, get_template_directory_uri() . ‘/cssmenu/styles.css’);
}

// Support for WordPress Walker Class
class CSS_Menu_Maker_Walker extends Walker {

  var $db_fields = array( ‘parent’ => ‘menu_item_parent’, ‘id’ => ‘db_id’ );

  function start_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat(“\t”, $depth);
    $output .= “\n$indent<ul>\n”;
  }

  function end_lvl( &$output, $depth = 0, $args = array() ) {
    $indent = str_repeat(“\t”, $depth);
    $output .= “$indent</ul>\n”;
  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {

    global $wp_query;
    $indent = ( $depth ) ? str_repeat( “\t”, $depth ) : ”;
    $class_names = $value = ”;       
    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    /* Add active class */
    if(in_array(‘current-menu-item’, $classes)) {
      $classes[] = ‘active’;
      unset($classes[‘current-menu-item’]);
    }

    /* Check for children */
    $children = get_posts(array(‘post_type’ => ‘nav_menu_item’, ‘nopaging’ => true, ‘numberposts’ => 1, ‘meta_key’ => ‘_menu_item_menu_item_parent’, ‘meta_value’ => $item->ID));
    if (!empty($children)) {
      $classes[] = ‘has-sub’;
    }

    $class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item, $args ) );
    $class_names = $class_names ? ‘ class=”‘ . esc_attr( $class_names ) . ‘”‘ : ”;

    $id = apply_filters( ‘nav_menu_item_id’, ‘menu-item-‘. $item->ID, $item, $args );
    $id = $id ? ‘ id=”‘ . esc_attr( $id ) . ‘”‘ : ”;

    $output .= $indent . ‘<li’ . $id . $value . $class_names .’>’;

    $attributes  = ! empty( $item->attr_title ) ? ‘ title=”‘  . esc_attr( $item->attr_title ) .'”‘ : ”;
    $attributes .= ! empty( $item->target )     ? ‘ target=”‘ . esc_attr( $item->target     ) .'”‘ : ”;
    $attributes .= ! empty( $item->xfn )        ? ‘ rel=”‘    . esc_attr( $item->xfn        ) .'”‘ : ”;
    $attributes .= ! empty( $item->url )        ? ‘ href=”‘   . esc_attr( $item->url        ) .'”‘ : ”;

    $item_output = $args->before;
    $item_output .= ‘<a’. $attributes .’><span>’;
    $item_output .= $args->link_before . apply_filters( ‘the_title’, $item->title, $item->ID ) . $args->link_after;
    $item_output .= ‘</span></a>’;
    $item_output .= $args->after;

    $output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
  }

  function end_el( &$output, $item, $depth = 0, $args = array() ) {
    $output .= “</li>\n”;
  }
}

<?php get_header(); ?>
<main class=”wrap”>
  <section class=”content-area content-full-width”>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
      <article class=”article-full”>
        <header>
          <!– <h2><?php the_title(); ?></h2> –>
          <!– By: <?php the_author(); ?> –>
        </header>
       <?php the_content(); ?>
      </article>
<?php endwhile; else : ?>
      <article>
        <p>Sorry, no post was found!</p>
      </article>
<?php endif; ?>
  </section>
</main>
<?php get_footer(); ?>

/*
Theme Name: TNG Support
Author: uw-naam
Author URI: http://uw-site/
Description: Thema met ondersteuning voor TNG
Version: 1.0
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
*/

body {
    background-color: #f9f9f9;
    font-family: ‘Open Sans’, Arial, Helvetica, sans-serif;
        margin: 0px auto;
        max-width: 1200px;
        padding: 0px 3em;
}

.my-logo,
footer {
  max-width: 1200px;
  margin: 0px auto 25px;
  padding: 5px 20px;
  color: #fff;
/*  border-radius: 10px; */
  background-color: #063e53 /*#2c3e50*/;
  border: 1px solid #063e53 /*#2c3e50*/;
}

body > header > h1 > a {
color: #ffffff;
font-weight: 400;
}
article > header {

}
footer {
  margin-top: 4px;
  font-size: 11px;
  text-align: center;
}

a {
  text-decoration: none;
  color: #3366cc;
}

/* ‘Margin: 0 auto’ centers block content on the page */
.wrap {
  width: 99%;
  margin: 0 auto;
}

.content-area {
  display: inline-block;
}

.content-thin {
    width: 70%;
}

.content-full-width {
    width: 100%;
}

.content-area,
.primary-sidebar {
  display: inline-block;
}

.primary-sidebar {
  width: 25%;
  padding: 1%;
  vertical-align: top;
  background-color: #ececec;
}

.article-loop {
    width: 45%;
    text-align: left;
    margin: 5px;
    padding: 10px;
}

@media screen and (max-width: 800px) {
  .article-loop {
    width: 99%;
  }
}
@media screen and (max-width: 400px) {
  .content-area,
  .primary-sidebar {
    width: 100%;
  }
}

.article-full {
  width: 100%;
}

.article-loop,
.article-full {
  display: inline-block;
  vertical-align: top;
  background-color: #f9f9f9;
  border-radius: 4px;
  margin-bottom: 4px;
}