New shortcode and new function.php for elementor

Hello Hector
Glad to get back to you.

Hello Hector
Glad to get back to you.

I see a lot of changes that sometimes go beyond my skills. I always used shortcodes I didn’t quite understand. Could you guide me to comply with you on the function.php file, the shortcodes and the style
Would you be kind enough to guide me to modify the impact of the change Thank you in advance

Function today

/**
 * 2023New Registers the shortcode [wpp_views_count].
 *
 * @author Hector Cabrera (https://cabrerahector.com)
 * @return string
 */
function wpp_views_count_func() {
    if (
        function_exists('wpp_get_views')
        && is_single()
    ) {
        $views_count = wpp_get_views( get_the_ID() );
        return ($views_count == 1) ? '1 view' : $views_count . ' views';
    }

    return '';
}
add_shortcode( 'wpp_views_count', 'wpp_views_count_func' );

/**
 * WPP 2023 CATEGORIE CURRENT
 * Current category for WPP
 */
function agile_wpp_set_current_category( $out, $pairs, $atts ) {
$bCat = false;
if (array_key_exists("cat",$atts)) {
  if ( is_single() )
    {
     // get first category
     $categories = get_the_category();
     if ( ! empty( $categories ) ) {
        $catID = $categories[0]->term_id;
        $bCat = true;
     }
    }
  elseif ( is_category() )
    {
     $catID = get_query_var('cat');
     $bCat = true;
    }
  if ($bCat)
    {
     if ($atts['cat'] == "current")
       {
        $atts['cat'] = $catID;
        $out['cat'] = $atts['cat'];
       }
    }
}
return $out;
}
add_filter( 'shortcode_atts_wpp', 'agile_wpp_set_current_category', 1, 3 );

/**
 * 2023 WPP NOMBRE DE VUES
 * Short code Wpp_View 
 */

function wpp_viewcounter($option)
{
    if ( function_exists('wpp_get_views') )
    {
        $nbView = wpp_get_views( get_the_ID() );
        $iNbView = intval( preg_replace("/[^0-9]/", "", $nbView) );
        return colorCounterView($iNbView);
    }
}
add_shortcode( 'wpp_counter_view', 'wpp_viewcounter' );

function colorCounterView($number)
{
    $counterColorBegin = "";
    $counterColorEnd = "";
    $num = intval( preg_replace("/[^0-9]/", "", $number) );

    if ( $num > 100 )
    {
        $counterImportant = "";
        if ($num >100) {$counterImportant = '-normal';}
        if ($num >300) {$counterImportant = '-good';}
        if ($num >500) {$counterImportant = '-verygood';}
        if ($num >1000) {$counterImportant = '-important';}
        if ($num >2000) {$counterImportant = '-veryimportant';}

        $counterColorBegin ='<span class="eye-counter-color' . $counterImportant .'">';
        $counterColorEnd = '</span>';
    }
    else {
        if ( strlen($number) > 4 ) {
            $counterImportant = '-veryimportant';
            $counterColorBegin ='<span class="eye-counter-color' . $counterImportant .'">';
            $counterColorEnd ='</span>';
        }
    }

    $views = sprintf(
        _n('%s vue', '%s vues', $number, 'wordpress-popular-posts'),
        $number
    );

    return $counterColorBegin . $views . $counterColorEnd;
}

/**
 * WPP 2023 LIMITE ARTICLE DE MOINS D UN AN 
 * Filters out popular posts that are older than the specified time.
 *
 * @param  string $where
 * @param  array  $options
 * @return string
 */
function wpp_filter_posts_by_age($where, $options){
    if ( ! is_admin() ) {
        $where .= ' AND p.post_date >= DATE_SUB(NOW(), INTERVAL 1 YEAR) ';
    }
    return $where;
}
add_filter('wpp_query_where', 'wpp_filter_posts_by_age', 10, 2);

Shortcode

[wpp_counter_view] 
[wpp range="weekly" thumbnail_width="600"   order_by="views" limit="20" ] 
[wpp_views_count  limit="20" thumbnail_width="600" range="monthly"  order_by="views" ]
[wpp range="week"  
 cat="current"  limit ="3" post_type="post" ] 
[wpp range="custom" time_unit='HOUR' time_quantity=24 limit ="3" ]

do I have to replace wpp everywhere with the new expression, monthly with month and the apostrophes “ou”?

Style general

/*Start WPP TOP archive style*/
	
.CSSarchive a {
  font-family: JAFRoboto, roboto, sans-serif;
  color: #360808;
  font-weight: 700;
  margin-top: 0;
  line-height: 1.3em;
  display: inline-block;
  font-size: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

	.CSSarchive a:hover {color :#00647A;}

	.wpp-meta{font-family: JAFRoboto, roboto, sans-serif; color: #360808; font-size:1vw;}


.CSSarchive ul {
  list-style-type: none;
  list-style-type: decimal !ie; /* IE 7- hack */
  list-style-position: inside;
  margin:0;
  margin-left: 1em; /* 2.5 */
  padding: 0;
  counter-reset: li-counter;
}

.CSSarchive ul > li {
  position: relative;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 5px;
  padding: 1em;
  background-color: #FFFFFF;
  text-align: justify;
}

.CSSarchive ul > li:before {
  position: absolute;
  left: -2em;
  font-size: 2.7em;
  line-height: 2;
  font-weight: 700;
  content: counter(li-counter);
  counter-increment: li-counter;
  color: #00647A;
  padding-left: 1em;
}

/* Desktop styles */
.wpp-list {
  display: flex;
  flex-wrap: wrap;
}

.CSSarchive li {
  flex-basis: calc(77%/ 3); /* Change the 3 to match the number of items in your list */
  margin-left: 3em;
  margin-right: 1em;
}

/* Mobile styles */
@media only screen and (max-width: 1024px) {
  .wpp-list {
    display: block;
  }
  .CSSarchive a {
    line-height: 1.3em;
  font-size: 1rem;
}

.wpp-meta{font-size:0.8rem;}
	
.CSSarchive li {
    flex-basis: calc(100% / 3); /* Change the 3 to match the number of items in your list */
    margin-left: 3em;
    margin-right: 1em;
  }
}
/*End WPP TOP archive style*/

/*Start WPP post color view */
.eye-counter-color-normal{color:#000000;}
.eye-counter-color-good{color:#ff8a00;}
.eye-counter-color-verygood{color: #ff0000;}
.eye-counter-color-important{ color: #e500e5;}
.eye-counter-color-veryimportant {color: #800080;}
.eye-counter-color-important, .eye-counter-color-veryimportant, .eye-counter-color-good, .eye-counter-color-verygood, .eye-counter-color-normal {font-weight: 700; }
/*End WPP post color view */

custom styling on an elementor code widget (one example)

selector .wpp-list { display: block !important;
}
selector ul > li:before {
  color: #00647A;
}

selector .wpp-list li { min-height:20em; padding:1em; margin-bottom:2em; }

selector .wpp-list img { margin-bottom: 1em; border-radius:5px;}

selector ul > li:before {
  left:-2.5em;
}

• This topic was modified 2 years, 9 months ago by NAROLLES.

The page I need help with: [log in to see the link]