开发者 |
Michael Uno
miunosoft |
---|---|
更新时间 | 2018年6月10日 05:39 |
捐献地址: | 去捐款 |
PHP版本: | 3.3 及以上 |
WordPress版本: | 4.9.6 |
版权: | GPLv2 or later |
版权网址: | 版权信息 |
[responsive_column_widgets]
[responsive_column_widgets columns="4"]
will display the widgets in 4 columns.
Optionally, if you like to change the number of columns in each row, use sequential numbers separated by commas.
For instance,
[responsive_column_widgets columns="3,2,5"]
will show the widgets in 3 columns in the first row, 2 columns in the second, and 5 to the third. Change the numbers accordingly for your needs.
To set the number of columns for each screen max-width, use the pipe (|) character as the delimiter and place the width in pixel followed by a colon (:). Omit the width for no limitation. For instance,
[responsive_column_widgets columns="5 | 800: 4 | 600 : 2 | 480: 1"]
will show the widgets in 5 columns when the browser widths is greater than 800, and 4 when the browser width is 800 to 601, and 2 when the browser width is 600 to 481, and 1 when the browser width is less than or equal to 480.
Use PHP code for Themes
The widget box can be displayed outside post/pages. Putting a PHP code into the theme is one way of doing it. Use the ResponsiveColumnWidgets()
function.
For instance,
<?php if ( function_exists( 'ResponsiveColumnWidgets' ) ) ResponsiveColumnWidgets( array( 'columns' => 5 ) ); ?>
will display the widgets in 5 columns.
= 参数 =\
There are other parameters besides columns.
column value | pixel: column value | pixel: column value | ...
The following example displays widgets in 5 column when the browser width is greater than 800, and four when the width is 601 to 800, and three when the width is 481 to 600, and one when the width is 1 to 480.
5 | 800: 4 | 600: 3 |480: 1
widget index - column span, widget index - column span, widget index - column span, ...
The following parameter value of colspans will set the first widget with 3 column space and the fourth widget with two column space and the seventh takes four column space. Unspecified widget items will have one column span.
1-3, 4-2, 7-4
To set them by screen max-width, like the columns parameter, use the colon(:) character after the width in pixel, and use the pipe (|) character to delimit each set of column spans. If the pixel is omitted, it is considered no limit. These widths need to correspond to the value passed to the columns parameter. e.g.
1-3, 4-2, 7-4 | 600: 1-2, 3-2, 7-3 | 480: 1-2
If the column span exceeds the set number of max column, the column span will follow the max column. Note that the widget index of omitted widgets will not be considered(counted) in the widget index of this parameter.
3600
[responsive_column_widgets call_id="days" columns="7"]
The value for the call_id parameter can be any string that identifies the call.
Now we need to hook into the RCW_filter_widget_output_array filter so that we can intervene the process of plugin's rendering widgets. It accepts two parameters. The first one will be the output array and the second one is the parameter array.
In the callback function for the filter, we check if the parameter call_id holds the correct value. You should change the value to suite your needs, which should be unique and not conflict with others.
`
add_filter( 'RCW_filter_widget_output_array', 'RCW_CustomArrayOutput', 10, 2 );
function RCW_CustomArrayOutput( $aOutput, $aParams ) {
if ( ! isset( $aParams['call_id'] ) ) {
return $aOutput;
}
if ( 'days' === $aParams['call_id'] ) {
return array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' );
}
return $aOutput;
}
`
This will display the days in 7 columns. The plugin will generate the CSS rules based on the parameter values. And the rules will be inserted inside the body tag.
If you like to insert the style in the head tag, use the ResponsiveColumnWidgets_EnqueueStyle function. Tell the function that which parameters are going to be used.
add_filter( 'wp_loaded', 'RCW_CustomArrayAddStyle' ); function RCW_CustomArrayAddStyle() { if ( function_exists( 'ResponsiveColumnWidgets_EnqueueStyle' ) ) { ResponsiveColumnWidgets_EnqueueStyle( array( 'columns' => "7" ) ); } }
Note that 'call_id' => 'days'
can be omitted. The other parameters should not be omitted.
For cases that the shortcode is not used, you can use the ResponsiveColumnWidets() function.
$aYourArray = array( 'a', 'b', 'c', 'd' ); if ( function_exists( 'ResponsiveColumnWidets' ) ) { ResponsiveColumnWidets( array( 'columns' => 4 ), $aYourArray ); }
This will output a, b, c, d
in four columns.
Video Tutorials
http://en.michaeluno.jp/responsive-column-widgets/tutorials/Go to Appearance > Widgets and add widgets to the plugin's custom sidebar box. Then use the shortcode in a post. That's it. If you still cannot figure it out, take the screenshots of the wp-admin/widgets.php page and the page of the post you added the shortcode. And request a support with the screenshots.
You can add your rules to the classes named .responsive_column_widget_box .widget. Go to the widget box's edit page and enter your custom rules in the Custom CSS section or define it in your theme's style.css.
e.g.
.responsive_column_widget_box .widget { padding: 4px; line-height: 1.5em; background-color: #EEE; }
Yes. Hope this helps.
Yes, with Pro.
It happens occasionally. Please ask for support with a link to your live site and the screenshots. In most cases, it can be solved by adjusting CSS rules causing the conflicts.
You can set up to 12 columns.
Sure. Please post it in the forum or the comment section of the plugin page.
Notice: get_screen_icon is deprecated since version 3.8.0.
, appeared in setting pages.wp_kses_js_entities is deprecated
.Warning: strpos() empty delimiter...
.General Options
to General
in the plugin admin setting page.Delay Sidebar Registration
to be checked by default..responsive_column_widgets_box.responsive_column_widgets { ... }
shuold change it to .responsive_column_widgets .responsive_column_widgets_box
.