Multimusen.dk

Author: Per Thykjaer Jensen

  • Blocks Animation

    Blocks Animation

  • Rellax e-Com

    Rellax e-Com

  • Animation and parallax – custom code in WordPress

    Animation and parallax – custom code in WordPress


    Animations, Effects and Custom Code in WordPress

    Animations and Parallax

    Plugin: Blocks Animation – CSS Animations for Gutenberg Blocks

    Parallax Javascript Library

    Rellax.js

    Rellax.js

    Here you can download Rellax.js:

    All about Rellax.js
    Rellax CDN

    Rellax need this script at the end of your page or post:

    <!-- initiate Rellax Js -->
<script>
  // Place this script at the end of the page.
  // Start Rellax
  var rellax = new Rellax('.rellax');
  // Destroy and create again parallax with previous settings
  // rellax.refresh();
</script>

    How can I give a <div> or similar container elements full width?

    Here you have to have a closer look at the WP code. In your browser try to inspect a div, and note it’s width. If you do this you can see, that the div has a class named alignfull. Add this class to the WP markup:

    <!-- Put the cover inside a div element -->
<div class="rellax alignfull" data-rellax-speed="3" style="width:100vw;">

    Don’t tell it.

    Show it!

    Bam !!
    Url: https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbDV2NjRjMHd4MmphbXV4NmFpOWhkMnJib3hvbWp6OWpuNGEwbmV4eSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/3lxnK7ITpLB205JD5k/giphy.gif

    CSS animations

    How to add custom code
    e.g. from jsFiddle or CodePen

    Custom Code: CSS, HTML and JavaScript

    And yes – in this particular order:

    1. Add a custom HTML block.
    2. Copy the CSS and place it in a <style> element.
    3. Next insert the HTML
    4. After the HTML-element(s) add theJavaScript.

    In the Custom HTML block the code above could look like this:

    <style>
#square {
  background-color: yellow;
  width: 125px;
  height: 125px;
  border: 3px solid black;
}
@keyframes example {
  from {left: 0px;}
  to {left: 200px}
}
.animate {
  position: relative;
  animation-name: example;
  animation-duration: 4s;
}
</style>
<!-- Her følger HTML -->
<div id="square"></div>
<h3>Click the yellow square</h3>
<script>
let runAnimation = function(){
  square.classList.add("animate");
  setTimeout(clearClass, 4000);
}
// element.addEventListener("click", myAddClassFunction);
square.addEventListener("click", runAnimation);
//
let clearClass = function(){
  square.classList.remove("animate");
}
</script>

    Click the yellow square!

    Custom Code in WP

    Animations
    Parallax
    CSS
    JavaScript

    Maps

    … and much more …
    Q.E.D.


  • Animation

    Animation

    This animation is made by the Animate Gutenberg Blocks Plugin.

  • Buggy: Create Block Theme

    I have wasted several hours on the “Create Block Theme” plugin. Now it’s imposible to add new fonts. This error will come up:

    I have filed an error report to WP. The error suggests that you should add something along these lines to wp_config.php. But this has no effect on the plugin.

    # define( 'DISALLOW_FILE_EDIT', false );

    Now adding fonts to a theme that calls itself “Full Site Editing” should work like a breeze. In reality it’s a stumbling block.

    WordPress 6.3 has high ambitions, but honestly speaking, but in practise the UX is too often confusion. So this is perhaps a minor problem.

  • What is WordPress?

    What is WordPress?

    Introduction to WP
    If you need a simple easy to read article about WP, what is is – and what it can do for you try “What is WordPress” (Kinsta). In this article you’ll get a fine overview of the many options WP gives.

    “Many years ago, WordPress was primarily a tool to create a blog, rather than more traditional websites.

    That hasn’t been true for a long time, though.

    Nowadays, thanks to changes to the core code, as well as WordPress’ massive ecosystem of plugins and themes, you can create any type of website with WordPress.”

    Kinsta: What is WordPress?

    And then …
    When you know what WP is, then try the tutorials from Learn WordPress.

    Another good resource for an overview of WP is this article “What is WordPress” by Blair Thorne. Here WP is defined:

    The flexibility of WordPress, combined with its extensive library of themes and plugins, makes it suitable for almost any type of website you can imagine.

    Blair Thorne
    “What is WordPress“

    In this article Blair Thorne lists several use case scenarios for WP. These samples demonstrate that WP is far more versatile than a mere block.

    My Tutorials

    In my classes at the Multimedia Design Programme at Business Academy Aarhus I teach eCommerce. Here WP is a key component with the WooCommerce online shops. If you are interested in tutorials about block based themes and block based WooCommerce have a look at these sites.

    If you need a tutorial to get started, just click the buttons below.

    woo.thoth.dk (Woo)
    thoth.dk (WP)
  • Gallery from w3 tutorial

    Gallery from w3 tutorial

    1 / 3

    Caption Text
    2 / 3

    Caption Two
    3 / 3

    Caption Three




    from this turtorial: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_slideshow

  • Does the Browser Block Your Website?

    Is your website is blocked in the browser because it’s “not safe”? In that case you have to install the HTTPS protocol. On Simply.com this operation is relatively simple:

    Enable HTTPS

    1. In the Dashboard go to HTTPS settings.
    2. Enable HTTP
    3. Optional: force HTTPS.

    How about SubDomains?

    The HHTS settings will not work on the subdomains. Here you have to enable HTTPS again on each subdomain.

    HTTPS and WordPress

    If you have WordPress install the plugin “Really Simple SSL” and activate it.

  • Future Challenges for WordPress

    Future Challenges for WordPress

    The Full Site Editor is not in Beta any more. There are attempts at improvements. But will the new user understand the complex features?

    This morning I saw that the FSE editor is out of the somewhat chaotic beta state. That’s great news.

    The first impression is positive because the interface is more logical now. You don’t have to search for the styles in weird places any more. All design options are presented in the FSE editor environment.

    • At last we have an easy to find navigation menu.
    • The styles have a menu handle.
    • The template and template parts are also available.

    Navigation

    The navigation was very hard to find in the Beta state. However, it’s still somewhat unclear what to do when you click the different menus.

    They’ll send you to the page/post or template/template part, where the menu appears. There you’ll have to edit things.

    Promising, but still a bit puzzling.

    Styles

    The styles will give access to the different style variations. That’s cool. Now they are more easy to find.

    When you click edit you’ll get the actual styles of your site. That’s ok.

    Templates and Template Parts

    The template and template parts are listed as in the Beta version. At the + you can add another template.

    For person beginning to use WP the template-concept is utterly confusing. At least I often meet users that don’t know the difference between content and a template.

    FSE (full site editing) is of course cool, but we still need a very good introduction to questions like:

    • What is the difference between a template and a page?
    • What is the connection between a page and a template?
    • What is the best time to edit a template or should I add my content in a page or post?
    • Why do we need so many templates, and what are their functions in e.g. TT3?

    Of course such questions show, that the person beginning to use WP does not know the basic concepts, like:

    • What is a Page (static content)?
    • What is a Post (blog, news rooll)?
    • What is a template (Design the looks of pages and posts, categories etc.)?

    Will this Confusion End?

    For the experienced WP user questions like the ones above are trivial. However, the strength of WP was alway it’s unserfriendly approach.

    The learning curve in CMS systems like Joomla, Drupal or Typ03 is very steep. When I made Joomla solutions, often the users had to have tutorials.

    Personally I fear, that WordPress has become extremely complex. But the new additions to the FSE editor is indeed a positive development.

    When I began to use WP the strength was it’s ease of use. You installed WP. Began to write blog posts or create pages. End of story.

    The modern user of WP will have to come to terms with very abstract concepts. The relation between content and template can be very hard to explain to new WP users.

    For WP teachers and consultants the future is bright. New users will need an introduction course.

    And that’s a challenge for WordPress.

  • WooCommerce Research

    WooCommerce Research

    Research Notes for a e-Commerce Class. How to set up WooCommerce with sample data, fake payment and block based editors.

    The Sample data for WooCommerce is located in sample-products.csv or sample-products.xml, which are located in the WooCommerce plugin folder in woocommerce/sample-data/

    Check this article.

    An alternative is this file.

    Video

    How to Add Woocommerce Product Sample Data in WooCommerce with Product Images. By: Gomahamaya
    How To Add Fake Sample Data To WordPress & WooCommerce. By: WPCrafter.

    FakerPress is used in the video above

    FakePay for WooCommerce

    How to create crafted WooCommerce pages in e.g. Gutenberg and Kadence blocks.

    The video has an interesting feature: a functions.php hack that will enable Gutenberg (and other page builders) in WooCommerce. However, the authors tell, that this way of doing things may become deprecated soon.

    Edit Products in Gutenberg

    Enable Gutenberg

    Note: this code could be deprecated soon.

    Add this to functions.php:

    // enable gutenberg for woocommerce
function activate_gutenberg_product( $can_edit, $post_type ) {
 if ( $post_type == 'product' ) {
        $can_edit = true;
    }
    return $can_edit;
}
add_filter( 'use_block_editor_for_post_type', 'activate_gutenberg_product', 10, 2 );

// enable taxonomy fields for woocommerce with gutenberg on
function enable_taxonomy_rest( $args ) {
    $args['show_in_rest'] = true;
    return $args;
}
add_filter( 'woocommerce_taxonomy_args_product_cat', 'enable_taxonomy_rest' );
add_filter( 'woocommerce_taxonomy_args_product_tag', 'enable_taxonomy_rest' );

    WooCoomerce 2023 tutorial

    (3 hours tutorial) “… from start to finish how to create a webshop using WordPress and WooCommerce. This eCommerce tutorial is both for people that want to create a fully functional webshop from scratch and for people that want to extend their WordPress website with a webshop.”
  • Categories and Custom Query Blocks

    Categories and Custom Query Blocks

    Categories

    You can give structure to a blog if you remember to add your Posts to one or more categories. Here you have to analyze your content. Which categories will be relevant in this case?

    Categories can be anything from:

    • Language (categories: English, Danish, Slovakian, German, Chinese)
    • Topics (categories: fashion, kitesurfing, hiking)

    To the right in the Post settings you can add any post to a category. If the category does not exist you can create it too:

    In this case you can see a few language categories. This post is in the English category. You may want more categories than this.

    Categories and the Menus

    In the menus you can link to a category. The category is presented in the Archive template. So if you want to change the looks of the category page, that’s the template you’re looking for.

    How to present a category in a post, page or template

    You can present categories in several ways. Explore the options in Gutenberg.

    Categories List

    Will list all categories:

    Categories

    Will display the presnt category, as you see below here:

    ,

    Query Loop

    Add a Filter, and select Taxonomies. Click on the + and select categories. Now write the category you want to see. In this case the category below is “English”.

    In this way you can filter the content by one or more categories:

    Sample Query Loop

    Category: English

    Tags

    Remember that you can add tags to a Post. Then you can filter by tags too – or even by a combination of tags and categories.

    In this way you can add structure to a blog.

  • Bill Gates: About the AI Age

    These days Bill Gates acts like a renaissance thinker watching the world from a tower. To Gates there is no doubt that AI is the mark of a new age:

    “But I think in the next five to 10 years, AI-driven software will finally deliver on the promise of revolutionizing the way people teach and learn. It will know your interests and your learning style so it can tailor content that will keep you engaged. It will measure your understanding, notice when you’re losing interest, and understand what kind of motivation you respond to. It will give immediate feedback.”

    (Bill Gates: The Age of AI has Begun)

    Concerning teaching and AI:

    “I know a lot of teachers are worried that students are using GPT to write their essays. Educators are already discussing ways to adapt to the new technology, and I suspect those conversations will continue for quite some time. I’ve heard about teachers who have found clever ways to incorporate the technology into their work—like by allowing students to use GPT to create a first draft that they have to personalize.“

    Gates, op.cit.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close