https://im1.cc/tag/%E7%BC%96%E8%BE%91%E5%99%A8/ https://im1.cc/WordPress/164.html 2024-06-11T09:32:36+08:00 在 WordPress 中开发自定义区块并在其中使用其他区块（如 wp:image），可以通过 Gutenberg 块编辑器的 React 组件来实现。这通常涉及使用 @wordpress/blocks 和 @wordpress/block-editor 包来创建和嵌套区块。以下是详细步骤，包括创建一个自定义区块并在其内部使用 wp:image。1. 设置开发环境使用 @wordpress/create-blocknpx @wordpress/create-block my-custom-block这个命令会生成一个名为 my-custom-block 的项目文件夹，包含开发自定义区块所需的基础文件。2. 创建和注册自定义区块编辑 block.json定义自定义区块的基本信息：{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "my-custom-block/container", "title": "My Custom Block", "category": "widgets", "icon": "smiley", "description": "A custom block with nested image block.", "supports": { "html": false }, "attributes": { "content": { "type": "string", "default": "" } }, "textdomain": "my-custom-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/editor.css", "style": "file:./build/style.css" }编辑 src/index.js注册区块：import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; import save from './save'; import './style.scss'; registerBlockType('my-custom-block/container', { edit: Edit, save, });编辑 src/edit.js在编辑视图中使用 wp:image 块：import { __ } from '@wordpress/i18n'; import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; const ALLOWED_BLOCKS = ['core/image']; const Edit = ({ attributes, setAttributes }) => { const blockProps = useBlockProps(); return ( <div {...blockProps}> <h2>{__('My Custom Block', 'my-custom-block')}</h2> <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} /> </div> ); }; export default Edit;编辑 src/save.js保存视图支持嵌套内容：import { useBlockProps, InnerBlocks } from '@wordpress/block-editor'; const save = ({ attributes }) => { const blockProps = useBlockProps.save(); return ( <div {...blockProps}> <InnerBlocks.Content /> </div> ); }; export default save;编辑 src/style.scss定义区块的样式：/* style.scss - 前端样式 */ .wp-block-my-custom-block-container { padding: 20px; border: 1px solid #ccc; } /* editor.scss - 编辑器样式 */ .wp-block-my-custom-block-container { padding: 20px; border: 1px dashed #ccc; }3. 构建和加载区块构建区块在项目目录中运行以下命令以构建 JavaScript 和样式文件：npm install npm run build加载区块在 WordPress 插件或主题中注册和加载区块。插件主文件（例如 my-custom-block.php）：<?php /* Plugin Name: My Custom Block Description: A custom block with nested image block. Version: 1.0 Author: Your Name */ function my_custom_block_register() { register_block_type(__DIR__); } add_action('init', 'my_custom_block_register'); ?>4. 扩展功能使用区块属性如果需要在自定义区块中使用区块属性，可以在 edit.js 和 save.js 中处理属性。例如，为图片块添加自定义属性：// edit.js const ALLOWED_BLOCKS = ['core/image']; const Edit = ({ attributes, setAttributes }) => { const blockProps = useBlockProps(); return ( <div {...blockProps}> <h2>{__('My Custom Block', 'my-custom-block')}</h2> <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} template={[ ['core/image', { align: 'center' }] ]} /> </div> ); }; // save.js const save = ({ attributes }) => { const blockProps = useBlockProps.save(); return ( <div {...blockProps}> <InnerBlocks.Content /> </div> ); };使用 InspectorControls你可以使用 InspectorControls 添加额外的设置：// edit.js import { InspectorControls } from '@wordpress/block-editor'; import { PanelBody, TextControl } from '@wordpress/components'; const Edit = ({ attributes, setAttributes }) => { const blockProps = useBlockProps(); return ( <div {...blockProps}> <InspectorControls> <PanelBody title={__('Settings', 'my-custom-block')}> <TextControl label={__('Example Setting', 'my-custom-block')} value={attributes.exampleSetting} onChange={(value) => setAttributes({ exampleSetting: value })} /> </PanelBody> </InspectorControls> <h2>{__('My Custom Block', 'my-custom-block')}</h2> <InnerBlocks allowedBlocks={ALLOWED_BLOCKS} /> </div> ); };5. 更新前端显示如果你需要在前端显示自定义的样式或脚本，可以在 style.scss 中定义样式，或在保存视图中添加自定义 HTML 结构。自定义前端样式/* style.scss */ .wp-block-my-custom-block-container .wp-block-image img { border-radius: 50%; }总结通过以上步骤，你可以开发一个自定义 WordPress 区块，并在其中嵌套使用 wp:image（即 core/image）等其他核心区块。此流程包括：设置开发环境：使用 @wordpress/create-block 生成基础结构。创建和注册区块：在 block.json 和 index.js 中定义区块。编写区块代码：在 edit.js 中使用 InnerBlocks 嵌套其他区块。构建和加载区块：通过 npm 构建并在插件或主题中加载。扩展功能：使用属性、控制面板等功能增强区块。通过这种方式，你可以在自定义区块中实现复杂的布局和功能，利用 WordPress 提供的区块编辑器 API 构建动态和互动性强的内容块。 https://im1.cc/WordPress/162.html 2024-06-11T09:08:00+08:00 在 WordPress 中开发高度自定义的区块（blocks）除了使用 HTML，还可以利用现代 JavaScript、React、和 WordPress 的 @wordpress/block-editor 和 @wordpress/blocks 等包。这里是详细步骤，包括设置开发环境、创建区块、以及如何实现自定义功能。1. 设置开发环境使用 @wordpress/create-block 工具WordPress 提供了 @wordpress/create-block 工具，简化区块开发的基本设置。npx @wordpress/create-block my-custom-block这会创建一个新项目文件夹 my-custom-block，包含所有必要的文件和配置。2. 理解区块的基本结构文件结构my-custom-block/ ├── build/ ├── src/ │ ├── index.js │ ├── edit.js │ ├── save.js │ ├── style.scss │ └── editor.scss ├── block.json ├── package.json ├── README.md └── webpack.config.jssrc/: 包含区块的源代码。block.json: 定义区块的元数据。package.json: 包含项目的依赖和脚本。webpack.config.js: 用于打包项目。重要文件block.json：定义区块的基本信息和属性。index.js：注册区块。edit.js：编辑视图（用于区块编辑器）。save.js：保存视图（用于前端展示）。编写区块代码block.json定义区块的基本信息：{ "$schema": "https://schemas.wp.org/trunk/block.json", "apiVersion": 2, "name": "my-custom-block/block", "title": "My Custom Block", "category": "widgets", "icon": "smiley", "description": "A custom block example.", "supports": { "html": false }, "textdomain": "my-custom-block", "editorScript": "file:./build/index.js", "editorStyle": "file:./build/editor.css", "style": "file:./build/style.css" }src/index.js注册区块：import { registerBlockType } from '@wordpress/blocks'; import Edit from './edit'; import save from './save'; import './style.scss'; registerBlockType('my-custom-block/block', { edit: Edit, save, });src/edit.js定义编辑视图：import { useBlockProps } from '@wordpress/block-editor'; import { TextControl } from '@wordpress/components'; const Edit = ({ attributes, setAttributes }) => { const blockProps = useBlockProps(); return ( <div {...blockProps}> <TextControl label="Example Text" value={attributes.exampleText} onChange={(value) => setAttributes({ exampleText: value })} /> </div> ); }; export default Edit;src/save.js定义保存视图：import { useBlockProps } from '@wordpress/block-editor'; const save = ({ attributes }) => { const blockProps = useBlockProps.save(); return ( <div {...blockProps}> {attributes.exampleText} </div> ); }; export default save;src/style.scss 和 src/editor.scss定义区块的样式：/* style.scss - 前端样式 */ .wp-block-my-custom-block-block { padding: 20px; border: 1px solid #ccc; } /* editor.scss - 编辑器样式 */ .wp-block-my-custom-block-block { padding: 20px; border: 1px dashed #ccc; }4. 构建区块使用 npm 脚本来打包区块：npm install npm run build这会编译你的 JavaScript 和 SCSS 文件到 build 目录。5. 加载区块确保在你的 WordPress 主题或插件中注册和加载区块。PHP 代码在插件或主题的 PHP 文件中：function my_custom_block_register() { register_block_type(__DIR__); } add_action('init', 'my_custom_block_register');6. 扩展功能使用更多 React 组件你可以使用 WordPress 提供的各种 React 组件，如 TextControl, MediaUpload, InspectorControls 等，以增强区块的功能。import { InspectorControls, MediaUpload } from '@wordpress/block-editor'; import { Button, PanelBody } from '@wordpress/components'; // 在 edit.js 中使用这些组件 <InspectorControls> <PanelBody title="Media Settings"> <MediaUpload onSelect={(media) => setAttributes({ mediaId: media.id, mediaUrl: media.url })} allowedTypes={['image']} render={({ open }) => ( <Button onClick={open} className="button button-large"> Select Image </Button> )} /> </PanelBody> </InspectorControls>动态区块创建动态区块可以在保存时执行 PHP 代码生成内容：function render_my_custom_block($attributes, $content) { // 使用 $attributes 和 $content 来生成动态内容 return '<div class="my-custom-block">' . esc_html($attributes['exampleText']) . '</div>'; } register_block_type('my-custom-block/block', [ 'render_callback' => 'render_my_custom_block', ]);总结开发高度自定义的 WordPress 区块涉及现代 JavaScript（尤其是 React）和 WordPress 提供的区块编辑器 API。你可以从基础的 HTML 开始，逐步增加交互性和复杂性。这里是主要步骤：设置开发环境：使用 @wordpress/create-block 工具。定义区块结构：包括 block.json, index.js, edit.js, 和 save.js。编写代码：利用 React 和 WordPress 的 API 实现自定义功能。构建和加载区块：通过 PHP 注册和加载区块。扩展功能：利用 WordPress 提供的组件和钩子，进一步定制区块。这种方法可以让你在 WordPress 中创建功能丰富且高度自定义的区块，满足各种复杂的需求。 https://im1.cc/Typecho/136.html 2024-05-19T15:50:00+08:00 在Markdown编辑器中，插入图片和链接时可以使用注脚（footnote）来提供额外的说明或注释。要修改插入图片和链接的注脚模式，您可以按照以下步骤进行操作：插入图片的注脚模式：在Markdown中插入图片时，通常的语法是! [图片描述] (图片链接)。要使用注脚模式，可以在图片描述后面加上脚注标识符（通常是^），然后在文本的其他位置添加相应的脚注内容。例如：![图片描述] [ ^1 ]，然后在文本其他位置添加1: 图片脚注内容。插入链接的注脚模式：在Markdown中插入链接时，通常的语法是[链接文本] (链接地址)。要使用注脚模式，可以在链接文本后面加上脚注标识符（通常是^），然后在文本的其他位置添加相应的脚注内容。例如：[链接文本] [ ^2 ]，然后在文本其他位置添加2: 链接脚注内容。通过以上步骤，您可以在Markdown编辑器中修改插入图片和链接的注脚模式，以便更好地管理和显示注脚内容。希望这些信息对您有所帮助！如果您有任何其他问题或需要进一步解释，请随时告诉我。1 ↩2 ↩ https://im1.cc/Typecho/121.html 2024-05-13T12:22:00+08:00 在Typecho中，你可以通过以下步骤为导航菜单项添加ICO图标：首先，在Typecho后台找到“独立页面”或者“自定义模板页面”编辑你想要添加ICO图标的页面。在页面编辑器中，找到自定义字段区域，添加一个自定义字段，例如命名为“icon”，并在值中填入你想要使用的ICO图标的class样式，比如“fa fa-home”（这里使用Font Awesome图标库的样式）。保存页面并发布。接下来，你需要在主题的导航菜单代码中调用这个自定义字段。打开你的主题文件（一般是header.php），找到导航菜单输出的代码部分。在输出导航菜单项的地方，添加对自定义字段的调用代码。可以使用以下代码获取自定义字段的值：<?php $icon = get_post_meta($page->cid, 'icon', true); ?>这行代码会获取当前页面的“icon”自定义字段的值。然后，在输出导航菜单项的地方，将获取到的ICO图标样式应用到菜单项中，例如：<li><a href="<?php $page->permalink(); ?>"><i class="<?php echo $icon; ?>"></i><?php $page->title(); ?></a></li>这样就会在导航菜单项中显示对应的ICO图标了。通过以上步骤，你可以在Typecho中通过页面自定义字段为导航菜单项添加ICO图标。记得在添加图标样式时，最好使用已知的图标库样式，以确保图标能正常显示。 https://im1.cc/Typecho/101.html 2024-05-06T09:45:00+08:00 {fwtab}要在 Typecho 主题的 functions.php 文件中获取当前页面加载完成速度时间，您可以使用 PHP 来实现。以下是实现的步骤：打开 functions.php 文件：登录到 Typecho 后台，找到您当前正在使用的主题文件夹。在主题文件夹中找到 functions.php 文件，并使用文本编辑器打开它。添加 PHP 代码：在 functions.php 文件中添加以下 PHP 代码，用于获取当前页面加载完成速度时间：function get_page_load_time() { $load_time = microtime(true) - $_SERVER["REQUEST_TIME_FLOAT"]; return $load_time; } 调用函数并显示加载时间：在需要显示加载时间的地方，您可以调用上面定义的 get_page_load_time() 函数，并显示加载时间：$page_load_time = get_page_load_time(); echo '页面加载完成时间：' . $page_load_time . ' 秒'; 保存并更新 functions.php 文件：保存修改后的 functions.php 文件，并刷新网站页面，以查看页面加载完成时间是否显示正常。看不懂得小伙伴，以下是完整的代码示例，您可以将其添加到 Typecho 主题的 functions.php 文件中：function get_page_load_time() { $load_time = microtime(true) - $_SERVER["REQUEST_TIME_FLOAT"]; return $load_time; } function display_page_load_time() { $page_load_time = get_page_load_time(); echo '页面加载完成时间：' . $page_load_time . ' 秒'; } add_action('init', 'display_page_load_time'); 在上面的代码中，我们定义了两个函数：get_page_load_time() 用于获取页面加载时间，display_page_load_time() 用于显示加载时间。然后，我们使用 add_action() 将 display_page_load_time() 函数挂钩到 init 动作上，以便在页面加载时调用并显示加载时间。保存并刷新页面后，您应该能够在页面上看到显示当前页面加载完成时间的内容。如果您遇到任何问题或需要进一步帮助，请随时告诉我。祝您成功！ https://im1.cc/Note/93.html 2024-05-04T11:12:00+08:00 今天主要更新会员中心登录和注册的独立页美化、个人中心美化！更新时间：2024.05.04独立登录注册页面美化后的效果如下；注册登录页 个人中心美化页 抛弃Typecho掘金编辑器《Typecho_Plugin_JJEditor》插件因为绑定性太强，自己重写的多功能快捷方式插入代码按钮插件，采用通用式不进行主题要求，所有主题都可安装使用；Typecho掘金编辑器绑定性问题，如下图； 重写的多功能快捷方式插入代码按钮插件效果演示图如下； 新增编辑器默认演示地址、下载地址、提取码参数值，前端按钮做了简约卡片式样式；提取码信息可鼠标这键自动复制提取码信息，并弹出提示语弹窗；效果演示图如下； 新增归档独立页面，作者说归档没什么用就没进行添加，不过我觉得还是有一点用处的，毕竟可以方便小伙伴们；归档页面：https://www.im1.cc/archive.html更新时间：2024.05.06更新文章美化框绿色提示框红色提示框黄色提示框灰色提示框蓝色提示框黑色提示框虚线提示框绿边提示框红边提示框橙边提示框新增下载地址链接秘钥访问功能，评论自动获取访问秘钥；[ 此功能灵感来源由：YinFengrui 童鞋 ]原创功能演示效果 https://im1.cc/WordPress/91.html 2024-05-04T09:31:00+08:00 要在WordPress网站中添加自助申请友情链接功能，您可以通过以下步骤来实现：创建友情链接页面：首先，在WordPress后台创建一个页面用于展示友情链接。您可以在页面中包含一个表单，供访问者填写他们的网站名称、URL和描述信息。添加自定义字段到链接页面：在友情链接页面中，您可以添加自定义字段来存储申请者填写的信息。在页面编辑器中，点击顶部的“选项”按钮，选择“自定义字段”，然后添加字段如下：website_name：用于存储网站名称website_url：用于存储网站URLwebsite_description：用于存储网站描述处理表单提交并保存数据：创建一个自定义模板文件（比如template-links.php），用于处理表单提交并保存数据。您可以在主题文件夹中创建这个文件。在自定义模板文件中，编写PHP代码来处理表单提交并将数据保存为WordPress文章。以下是一个简单的示例代码：<?php // 检查表单是否提交 if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_POST['submit'])) { // 获取表单数据 $website_name = sanitize_text_field($_POST['website_name']); $website_url = esc_url($_POST['website_url']); $website_description = sanitize_textarea_field($_POST['website_description']); // 创建文章对象 $new_link = array( 'post_title' => $website_name, 'post_content' => $website_description, 'post_status' => 'pending', // 设置为待审状态 'post_type' => 'post' // 可以根据需要设置为其他类型 ); // 插入文章并获取文章ID $link_id = wp_insert_post($new_link); // 添加自定义字段 add_post_meta($link_id, 'website_name', $website_name); add_post_meta($link_id, 'website_url', $website_url); add_post_meta($link_id, 'website_description', $website_description); // 显示成功消息 echo '您的申请已提交，待管理员审核！'; } ?> <!-- 在模板中显示表单 --> <form method="post"> <label for="website_name">网站名称:</label><br> <input type="text" name="website_name" required><br><br> <label for="website_url">网站URL:</label><br> <input type="url" name="website_url" required><br><br> <label for="website_description">网站描述:</label><br> <textarea name="website_description" required></textarea><br><br> <input type="submit" name="submit" value="提交申请"> </form> 审核并展示友情链接：当用户提交申请后，管理员可以在WordPress后台审核并发布友情链接文章。您可以在友情链接页面展示这些链接。通过以上步骤，您可以在WordPress网站中实现自助申请友情链接功能，而不需要使用插件。请根据您的需求和主题进行进一步的定制和优化。希服这些代码能帮助您实现自助申请友情链接功能！ https://im1.cc/WordPress/79.html 2024-04-30T14:35:00+08:00 要在 WordPress 网站中实现在复制网站内容时弹出提示框，您可以通过添加一些自定义 JavaScript 代码来实现，而无需使用插件。以下是一种可能的实现方法：添加自定义 JavaScript 代码：首先，在 WordPress 后台中，转到外观 -> 编辑器，找到您当前使用的主题（通常是 functions.php 文件）。在文件末尾添加以下 JavaScript 代码：<script type="text/javascript"> document.oncopy = function() { alert('请尊重原创内容，未经许可请勿复制！'); } </script>这段代码会在用户尝试复制网站内容时触发一个警告提示框。保存并测试：保存您所做的更改，并在网站上测试复制内容时是否会触发提示框。请注意，这种方法只是简单地在用户复制内容时显示一个提示框，无法完全阻止用户复制内容。此外，用户仍然可以通过禁用 JavaScript 或其他方法绕过这种提示框。如果您想要更复杂或更可靠的内容保护功能，可能需要考虑使用专门的内容保护插件或服务。但是，如果您只是想简单地添加一个提示框，上述方法应该可以满足您的需求。希望这对您有所帮助！如果您有任何疑问，请随时告诉我。 https://im1.cc/WordPress/26.html 2024-04-22T16:57:00+08:00 要在WordPress导航菜单中设置链接在新窗口打开，可以通过以下两种方法实现：方法一：使用WordPress后台设置在菜单编辑器中设置：登录WordPress后台，转到外观 -> 菜单。在菜单编辑器中，找到你想要在新窗口中打开的菜单项。点击菜单项右侧的小箭头以展开更多选项。在“链接目标”选项中选择“在新标签页中打开”。方法二：使用自定义功能如果你想通过自定义功能来实现在WordPress导航菜单中链接在新窗口中打开，可以按照以下步骤操作：1.编辑 functions.php 文件：在你的主题的 functions.php 文件中添加以下代码：function add_menu_link_target($atts, $item, $args) { if ($args->theme_location == 'primary') { // 替换为你的导航菜单位置 if (isset($atts['target'])) { $atts['target'] = '_blank'; } } return $atts; } add_filter('nav_menu_link_attributes', 'add_menu_link_target', 10, 3); 2.保存并上传文件：保存 functions.php 文件，并上传到你的WordPress主题中。这段代码会在特定导航菜单位置（这里假设为主导航菜单）中的所有链接上添加 target="_blank" 属性，从而使链接在新窗口中打开。使用以上方法之一，你可以实现在WordPress导航菜单中设置链接在新窗口中打开。如果需要更多帮助或有其他问题，请随时告诉我。 https://im1.cc/WordPress/22.html 2024-04-22T16:29:00+08:00 在 WordPress 6.5.2 最新版本中，如果你想为编辑器增加指定内容设置评论回复可见功能的按钮，一种简单的方法是使用一个自定义按钮来插入包裹需要隐藏的内容的短代码。这需要一些额外的工作，因为 WordPress 默认编辑器（Gutenberg）并不直接支持此功能。以下是一个可能的方法：创建一个自定义按钮：你可以在 WordPress 中创建一个自定义按钮，使得在编辑器中插入评论回复可见的短代码更加方便。添加自定义按钮的步骤：在主题的 functions.php 文件中添加以下代码来创建一个自定义按钮：function add_comment_reply_visible_button() { if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) { add_filter( 'mce_buttons', 'register_comment_reply_visible_button' ); add_filter( 'mce_external_plugins', 'add_comment_reply_visible_plugin' ); } } add_action('admin_head', 'add_comment_reply_visible_button'); function register_comment_reply_visible_button($buttons) { array_push($buttons, 'comment_reply_visible_button'); return $buttons; } function add_comment_reply_visible_plugin($plugin_array) { $plugin_array['comment_reply_visible'] = get_template_directory_uri() . '/comment-reply-visible.js'; return $plugin_array; }创建 comment-reply-visible.js 文件：在你的主题文件夹中创建一个 comment-reply-visible.js 文件，并添加以下内容：(function() { tinymce.PluginManager.add('comment_reply_visible', function( editor, url ) { editor.addButton( 'comment_reply_visible_button', { text: '评论回复可见', icon: false, onclick: function() { editor.insertContent('[comment_reply_visible]在此处插入需要隐藏的内容[/comment_reply_visible]'); } }); }); })();保存文件：保存 functions.php 和 comment-reply-visible.js 文件。在编辑器中使用自定义按钮：现在你应该在编辑器中看到一个名为“评论回复可见”的按钮。点击该按钮将插入评论回复可见的短代码，你可以在其中包裹需要隐藏的内容。这个方法需要一些基本的开发技能，如果你不熟悉如何操作，请谨慎进行。如果需要更多帮助或有其他问题，请随时告诉我。